feat: UI improvements (#995)

UI Changes after jam session with Xuan
near · Aug 8, 2024 · a238cb5 · a238cb5
1 parent 7e7f6c0
commit a238cb5
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/frontend/widgets/src/QueryApi.Launchpad.jsx b/frontend/widgets/src/QueryApi.Launchpad.jsx
@@ -14,11 +14,12 @@ const NoQueryText = styled.p`
   font-size: 16px;
   font-family: 'Mona Sans', sans-serif;
   color: #A1A09A;
+  width: 80%;
   text-align: center;
 `;
 
 const NoQuerySVG = styled.svg`
-  height: 100px;
+  height: 90px;
   width: 100%;
   color: #A1A09A;
 `;
@@ -28,7 +29,7 @@ const CheckboxContainer = styled.div`
 `;
 
 const CheckboxLabel = styled.label`
-  font-size: 12px;
+  font-size: 14px;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -53,6 +54,10 @@ const Checkbox = styled.input`
   vertical-align: middle;
   margin-right: 7.2px;
   outline: none;
+
+  &:checked {
+    background-color: #8279E2;
+  }
 `;
 
 // TOP HALF
@@ -86,7 +91,7 @@ const Subheadline = styled.p`
   font-family: 'Mona Sans', sans-serif;
   font-weight: 400;
   font-size: 16px;
-  line-height: 18.2px;
+  line-height: 24px;
   color: #717069;
   letter-spacing: 1.5%;
 `;
@@ -101,25 +106,25 @@ const Container = styled.div`
 
 const HeadlineContainer = styled.div`
   width: 364px;
-  height: 193px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-right: 80px; /* Gap between HeadlineContainer and WidgetContainer */
+  margin-top: 24px; //combine margin 
 `;
 
 const WidgetContainer = styled.div`
   width: 301px;
-  height: 365px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   box-shadow: 0 8.2px 19.92px 0 rgba(0, 0, 0, 0.1), 0 2.34px 2.34px 0 rgba(0, 0, 0, 0.15);
-  margin-top: 183px; /* Gap between WidgetContainer and HeadlineContainer */
+  margin-top: 140px; /* Gap between WidgetContainer and HeadlineContainer */
   background: #fff;
   border-radius: 10px;
+  padding: 16px 0 28px;
 `;
 
 const SubContainer = styled.div`
@@ -128,7 +133,7 @@ const SubContainer = styled.div`
 `;
 
 const SubContainerTitle = styled.h2`
-  font-family: 'Product Sans', sans-serif;
+  font-family: 'Mona Sans', sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 14.06px;
@@ -154,7 +159,7 @@ const MetadataIcon = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: normal; 
   width: 23px; 
   height: 17px;
@@ -207,7 +212,7 @@ scrollbar-color: #888 #f1f1f1;
 `;
 
 const GenerateButton = styled.button`
-  margin-top: 16px;
+  margin-top: 24px;
   width: 100%;
   background-color: #37CD83;
   border: none;
@@ -237,6 +242,7 @@ const InputWrapper = styled.div`
   border-radius: 6px;
   padding: 0;
   overflow: hidden;
+  margin-top: 24px;
 `;
 
 const StyledInput = styled.input`