fixing loader and other stuff

Author: nirmalkc

components/core/App.js

@@ -105,11 +105,11 @@ const App = (props) => {
         setShapeAction={setShapeAction} />
       {loading ? (
         <Loader
-          style={{margin: '20% auto auto 42%'}}
+          style={{position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}}
           type="Circles"
-          color="#eb3d86"
-          height={300}
-          width={300}
+          color="rgba(var(--color-brand-rgb), 0.6)"
+          height={200}
+          width={200}
         />
       ) : (
         <ShapeList 

components/utils/Header.js

@@ -37,6 +37,14 @@ const AppHeader = styled(Navbar)`
         width: 36px;
       }
     }
+
+    .navbar-collapse {
+      flex-grow: unset !important;
+    }
+
+    @media (min-width: 992px) {
+      justify-content: space-between !important;
+    }
 `;
 
 const Logo = styled.h1`
@@ -189,11 +197,10 @@ const LoginBarBefore = styled.div`
 
   @media (max-width: 991px) {
     justify-content: flex-end;
-    border: solid 1px rgba(var(--color-neutral-10-rgb), 0.2);
-    border-left-width: 0;
-    border-right-width: 0;
-    margin: 0.4rem 0;
-    padding: 0.6rem 0;
+    border-top: solid 1px rgba(var(--color-neutral-10-rgb), 0.2);
+    margin: 0.4rem 0 0 0;
+    padding: 0.8rem 0.8rem 0.4rem 0;
+    flex-wrap: wrap !important;
   }
 `;
 

components/utils/ShapeList.js

@@ -44,7 +44,7 @@ import { formatRelative } from "date-fns";
 
 // Shape Listing Styled-Componentns
 const ShapeCards = styled.div`
-    padding: 5rem 0 2rem 0;
+    padding: 2rem 0 2rem 0;
     display: grid;
     grid-template-columns: repeat(3, minmax(240px, 1fr));
     grid-gap: 2rem;   

styles/global.css

@@ -3,6 +3,7 @@
   --color-brand-light: #9553ff;
   --color-brand-dark: #491aa8;
   --color-brand-rgb: 93, 33, 210;
+  --color-brand-dark-rgb: #73, 28, 168;
   --color-brand-secondary: #af21d2;
   --color-brand-secondary-rgb: 175, 33, 210;
   --color-brand-teritiary: #2445ff;