Merge pull request #52 from oslabs-beta/annabelle/ui

Annabelle/UI
open-source-labs · Aug 23, 2023 · ab6956b · ab6956b
2 parents 80d01f7 + c09d2cc
commit ab6956b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 32 deletions.
diff --git a/frontend/components/sidebar/Sidebar.tsx b/frontend/components/sidebar/Sidebar.tsx
@@ -44,11 +44,11 @@ const Logo = styled.img`
   bottom: 100px;
   left: calc(${sidebarWidth} / 2);
   transform: translateX(-50%);
-  opacity: 0.5;
+  opacity: 0.8;
   z-index: -1;
-  filter: grayscale(100%);
-  width: 100px;
-  height: 100px;
+
+  width: 60px;
+  height: 60px;
 `;
 
 const ShowSidebarBtn = styled(IconButton)`
@@ -84,7 +84,7 @@ const HideSidebarBtn = styled(IconButton)`
 const HideSidebarBtnContainer = styled.div`
   position: absolute;
   display: flex;
-  width: 25px;
+  width: 15px;
   height: 100vh;
   background: transparent;
   flex-direction: column;

diff --git a/frontend/components/sidebar/TopButtons.tsx b/frontend/components/sidebar/TopButtons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import styled from 'styled-components';
-import { Equalizer, Settings, Coronavirus } from '@mui/icons-material';
+import { Equalizer, Settings, ThreeDRotation } from '@mui/icons-material';
 import HomeIcon from '@mui/icons-material/Home';
 
 import { textColor, hoverColor, selectedColor } from '../../style-variables';
@@ -97,7 +97,7 @@ function TopButtons() {
             })
           }
         >
-          <Coronavirus fontSize="large" />
+          <ThreeDRotation fontSize="large" />
         </StyledIconButton>
       </Tooltip>
     </Container>

diff --git a/frontend/components/views/ERTables/ERTabling.tsx b/frontend/components/views/ERTables/ERTabling.tsx
@@ -250,7 +250,7 @@ function ERTabling({ tables, selectedDb, curDBType }: ERTablingProps) {
   }, [schemaState]);
 
   return (
-    <div style={{ height: 'calc(100vh - 300px)' }}>
+    <div style={{ height: 'calc(100vh - 300px)', width: '100%' }}>
       <StyledViewButton
         variant="contained"
         id="add-table-btn"

diff --git a/frontend/components/views/QuickStartView.tsx b/frontend/components/views/QuickStartView.tsx
@@ -25,24 +25,25 @@ const PageContainer = styled.a`
 `;
 
 const StyledStepper = styled(Stepper)`
-  margin: 70px 0px 20px 0px;
+  margin: 60px 0px 20px 0px;
   background: transparent;
 `;
 
 const StyledStepLabel = styled(StepLabel)`
   width: 10vw;
   & .MuiStepLabel-label {
-    font-size: clamp(1rem, 1.28vw, 1.5rem);
+    font-size: clamp(1rem, 1.28vw, 1.3rem);
   }
 `;
 
 const StyledTypographyInstructions = styled.div`
-  font-size: clamp(1rem, 2.2vw, 1.3rem);
+  font-size: clamp(1rem, 2.2vw, 1.2rem);
   text-align: center;
+  width: 40vw;
 `;
 
 const StyledTypographyTitle = styled(Typography)`
-  font-size: clamp(5rem, 40vw, 5rem);
+  font-size: clamp(2rem, 35vw, 3rem);
 `;
 
 const NavButtons = styled.div`
@@ -59,6 +60,7 @@ const StepContent = styled.div`
 const StepList = styled.ul`
   text-align: left;
   font-size: 0.9em;
+  list-style: circle;
 
   & li {
     margin-top: 7px;
@@ -127,7 +129,7 @@ function getStepContent(step: number) {
             </li>
             <li>
               To export a database, select the file download icon next to the
-              databse name
+              database name
             </li>
           </StepList>
         </StyledTypographyInstructions>
@@ -138,20 +140,17 @@ function getStepContent(step: number) {
           <strong>Step 3:</strong>
           <StepList>
             <li>Select which database you want to query with</li>
-            <li>
-              Go into the queries tab by selecting the &quot;QUERIES&quot; tab
-              in the sidebar
-            </li>
+            <li>Select the &quot;QUERIES&quot; tab in the sidebar</li>
             <li>Give the query a label and a group</li>
             <li>
               Optionally: You can change the database from the
               &quot;Database&quot; dropdown
             </li>
             <li>
-              Use the &quot;Auto-Format&quot; button on the top-left to
-              automatically format the query
+              Use the brush icon on the top-right to automatically format the
+              query
             </li>
-            <li>Select the &quot;RUN QUERY&quot; button to execute</li>
+            <li>Select &quot;RUN QUERY&quot; button to execute</li>
             <li>
               The planning time, execution time, and actual total time now show
             </li>
@@ -168,11 +167,16 @@ function getStepContent(step: number) {
         <StyledTypographyInstructions>
           <strong>Step 4:</strong>
           <StepList>
-            <li>To save a query, click the folder icon in the queries tab</li>
-            <li>Designate a file location and click &quot;Select Path&quot;</li>
             <li>
-              Click the save icon in the query drop down to save queries
-              individually
+              To save a query, click the folder icon in the &quot;QUERIES&quot;
+              tab
+            </li>
+            <li>
+              Designate a save file location and click &quot;Select Path&quot;
+            </li>
+            <li>
+              Click the save icon in the query group drop-down to save queries
+              automatically to designated file location
             </li>
             <li>
               To import a query file, click the import icon, select the file you
@@ -187,11 +191,11 @@ function getStepContent(step: number) {
         <StyledTypographyInstructions>
           <strong>Step 5:</strong>
           <StepList>
+            <li>Select the checkboxes in the query group drop-down</li>
             <li>
-              Select the checkbox of the queries inside the groups you would
-              like to compare
+              Click the chart icon at the top of the sidebar to compare selected
+              queries
             </li>
-            <li>Click the chart icon at the top of the sidebar</li>
           </StepList>
         </StyledTypographyInstructions>
       );

diff --git a/frontend/style-variables.tsx b/frontend/style-variables.tsx
@@ -66,10 +66,10 @@ export const selectedColor = greenPrimary;
 export const hoverColor = greenPrimary;
 
 // Size
-export const sidebarWidth = '375px';
-export const defaultMargin = '20px';
+export const sidebarWidth = '365px';
+export const defaultMargin = '15px';
 export const tableWidth = `calc(100vw - (${defaultMargin} * 3) - ${sidebarWidth})`;
-export const sidebarShowButtonSize = '50px';
+export const sidebarShowButtonSize = '40px';
 
 // Execution Tree
 export const planNodeWidth = '200px';
@@ -125,7 +125,7 @@ export const MuiTheme = createTheme({
 });
 
 export const SidebarList = styled(List)`
-  padding: 0;
+  padding: 2%;
   width: 100%;
 `;
 

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",
     "dagre": "^0.8.5",
-    "debounce": "^1.2.1",    
+    "debounce": "^1.2.1",
     "electron": "^25.5.0",
     "fix-path": "^3.0.0",
     "fontsource-roboto": "^4.0.0",