Merge pull request #10 from roboflow/ui-updates

Add price, fix formatting
roboflow · Nov 29, 2023 · ee815c9 · ee815c9
2 parents 5c19bd0 + 5194fb2
commit ee815c9
Show file tree

Hide file tree

Showing 2 changed files with 398 additions and 19 deletions.
diff --git a/styles.css b/styles.css
@@ -18,6 +18,7 @@
     --spacing-sizing-3: 12px;
     --spacing-sizing-4: 16px;
     --spacing-sizing-6: 24px;
+    --spacing-sizing-8: 32px;
     --spacing-sizing-10: 40px;
     --border-radius-rounded-lg: 8px;
     --graph-line-color-1: rgba(255, 255, 255, 0.2);
@@ -62,6 +63,9 @@ main {
     align-items: stretch;
     gap: var(--spacing-sizing-10);
 }
+b {
+    font-weight: 600;
+}
 h1 {
     color: var(--primary-dark);
     font-family: "Space Mono";
@@ -80,9 +84,9 @@ h3 {
     color: var(--gray-700);
     font-family: Inter;
     font-size: 14px;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 20px;
-    margin-top: 16px;
+    margin-top: var(--spacing-sizing-4);
 }
 a {
     color: #6706ce;
@@ -162,7 +166,7 @@ a {
     padding: var(--spacing-sizing-6);
     flex-direction: column;
     align-items: stretch;
-    gap: var(--spacing-sizing-10);
+    gap: var(--spacing-sizing-8);
     border-radius: var(--border-radius-rounded-lg);
     border: 1px solid var(--gray-200);
     background: var(--white);
@@ -208,7 +212,7 @@ header {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 16px;
+    gap: var(--spacing-sizing-4);
 }
 
 .header_subtitle {
@@ -256,9 +260,6 @@ header {
     box-shadow: 0px 4px 64px 4px rgba(131, 21, 249, 0.5);
     transition: all 200ms;
 }
-.cost_text {
-    margin-bottom: -5px;
-}
 footer p {
     color: var(--gray-500);
 
@@ -267,12 +268,10 @@ footer p {
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
-    line-height: 16px; /* 133.333% */
+    line-height: var(--spacing-sizing-4); /* 133.333% */
 
     margin: 0;
-
     text-align: center;
-
     margin-bottom: var(--spacing-sizing-6);
 }
 .header_subtitle,
@@ -285,6 +284,11 @@ footer p {
     font-size: 14px;
     line-height: 20px; /* 142.857% */
 }
+
+/* .feature_header_text p {
+    color: var(--gray-500);
+    font-size: 16px;
+} */
 .chart {
     display: flex;
     flex-direction: column;
@@ -303,6 +307,10 @@ footer p {
     font-family: monospace;
     font-size: 28px;
     font-weight: 500;
+
+    /* For testing template */
+    /* max-width: 80px;
+    overflow: hidden; */
 }
 .chart_box_green {
     border: 1px solid var(--green-500);
@@ -319,7 +327,7 @@ footer p {
     align-items: flex-start;
     gap: var(--spacing-sizing-4);
     align-self: stretch;
-    height: 76px;
+    min-height: 76px;
 }
 .feature_header_text {
     display: flex;
@@ -329,8 +337,45 @@ footer p {
     flex: 1 0 0;
 }
 
+.request_summary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 16px;
+    gap: var(--spacing-sizing-2);
+    color: var(--gray-700);
+}
+
 .result_text {
+    width: 100%;
     color: var(--gray-700);
+    background-color: var(--gray-50);
+    border-radius: var(--border-radius-rounded-lg);
+    padding: var(--spacing-sizing-4);
+    box-sizing: border-box;
+    border: 1px solid var(--gray-100);
+}
+/* 
+.result_text_green {
+    border: 1px solid var(--green-500);
+    background: var(--green-50);
+    color: var(--green-500);
+}
+.result_text_red {
+    border: 1px solid var(--red-500);
+    background: var(--red-50);
+    color: var(--red-500);
+} */
+
+.request_price {
+    margin-left: 8px;
+    font-size: 12px;
+    color: var(--gray-500);
+    /* margin-bottom: var(--spacing-sizing-4); */
+}
+.request_price i {
+    color: #f59e0b;
+    margin-right: 6px;
 }
 
 .explainer_dropdown {
@@ -386,6 +431,7 @@ pre {
     width: 100%;
     box-sizing: border-box;
     font-family: monospace;
+    font-size: 14px;
     margin: 8px 0px;
     word-break: break-all;
 }
@@ -405,6 +451,7 @@ pre {
     margin: var(--spacing-sizing-2) 0px;
     background-color: var(--gray-50);
     border-radius: var(--border-radius-rounded-lg);
+    border: 1px solid var(--gray-100);
 }
 #lenny {
     position: absolute;
@@ -423,6 +470,7 @@ pre {
     }
     .feature_card {
         flex: 1 0 0;
+        gap: var(--spacing-sizing-6);
     }
     .feature_header {
         flex-direction: column;
@@ -451,7 +499,7 @@ pre {
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
-    line-height: 16px; /* 133.333% */
+    line-height: var(--spacing-sizing-4); /* 133.333% */
 
     margin: 0;
 }
@@ -463,7 +511,7 @@ pre,
     background-color: var(--gray-50);
     border-radius: var(--border-radius-rounded-lg);
     padding: var(--spacing-sizing-6);
-    font-size: 15px;
+    font-size: 16px;
     color: var(--gray-700);
     display: flex;
     flex-direction: column;