Merge pull request #2 from CodeForPhilly/NavBar

Nav bar
CodeForPhilly · Jul 16, 2023 · 06878fa · 06878fa
2 parents e8ec939 + 731c20c
commit 06878fa
Show file tree

Hide file tree

Showing 22 changed files with 973 additions and 184 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -8,7 +8,7 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 
 # Install dependencies
-RUN npm ci
+RUN npm ci --legacy-peer-deps
 
 # Copy project files
 COPY . .

diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Lora:wght@700&display=swap"
       rel="stylesheet"
     />
-    <title>Balancer</title>
+    <title>Balancer - A Tool To Assist</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,17 +11,19 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
+    "axios": "^1.4.0",
     "formik": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.7",
     "react-router": "^6.14.0",
     "react-router-dom": "^6.14.0",
+    "react-typed": "^1.2.0",
     "redux-toolkit": "^1.1.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.37",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.0",

diff --git a/src/App.css b/src/App.css
@@ -13,10 +13,6 @@
   }
 }
 
-.card {
-  padding: 2em;
-}
-
 .read-the-docs {
   color: #888;
 }
@@ -25,6 +21,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .sidebar-icon {
+    @apply;
+  }
+}
+
 /* 
   Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! 
 */
@@ -71,10 +73,10 @@
       hsla(215, 98%, 61%, 1) 0px,
       transparent 0%
     ),
-    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
+    radial-gradient(at 97% 21%, F5F6F9(125, 98%, 72%, 1) 0px, transparent 50%),
     radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
     radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
-    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
+    radial-gradient(at 97% 96%, F5F6F9(38, 60%, 74%, 1) 0px, transparent 50%),
     radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
     radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
   position: absolute;
@@ -95,29 +97,42 @@
 /* Tailwind Styles */
 
 .container {
-  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
+  @apply relative z-10 flex items-center flex-col w-full mx-auto;
 }
 
 .black_btn {
-  @apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black;
+  @apply rounded-full border border-black bg-blue-500 py-2.5 px-6 text-sm text-white transition-all hover:bg-white hover:text-black;
 }
 
 .head_text {
-  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center;
+  @apply mt-16 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center;
 }
 
 .orange_gradient {
   @apply bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600 bg-clip-text text-transparent;
 }
 
 .desc {
-  @apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl;
+  @apply mt-7 text-lg text-gray-800 sm:text-xl text-center max-w-2xl font-sans;
+  font-size: 270%;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  line-height: 1;
+}
+.desc1 {
+  @apply mt-5 text-lg text-gray-800 sm:text-xl text-center max-w-2xl font-sans;
+  font-size: 100%;
+  letter-spacing: 0.03em;
 }
 
 .url_input {
   @apply block w-full rounded-md border border-gray-300 bg-white py-2.5 pl-5 pr-5 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0;
 }
 
+.url_input_loading {
+  @apply block w-full rounded-md border border-gray-300 bg-white py-2.5 pl-5 pr-5 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0 bg-gray-300 bg-opacity-50;
+}
+
 .submit_btn {
   @apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400;
 }
@@ -135,5 +150,6 @@
 }
 
 .summary_box {
-  @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4;
+  @apply rounded-xl border border-gray-300 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] p-4 max-w-[670px];
+  /* backdrop-blur */
 }
diff --git a/src/assets/account.svg b/src/assets/account.svg
diff --git a/src/assets/close.svg b/src/assets/close.svg
diff --git a/src/assets/hamburger.svg b/src/assets/hamburger.svg