refactor: 🔥 restructuring the project and ui fixes

.gitignore

@@ -27,5 +27,6 @@ yarn-error.log*
 
 .idea
 
-.vscode/settings.json
+.vscode
+.vscode*
 .vercel

src/components/Footer/Footer.module.scss

@@ -10,14 +10,12 @@
   .FooterBody {
     display: flex;
     flex-direction: column;
-    padding: rem(3);
   }
 
   .FooterSection {
     display: flex;
     flex-direction: row;
     gap: rem(9.6);
-    max-width: 1264px;
   }
 
   .FooterLogo {
@@ -197,7 +195,7 @@
     .FooterBody {
       display: flex;
       width: 100%;
-      padding: rem(3.2) rem(1.6);
+      padding-block: 32px;
     }
 
     p {
@@ -221,7 +219,7 @@
 
     @media (max-width: 600px) {
       .FooterBody {
-        padding: rem(3.2) rem(1.6);
+        padding-block: 32px;
       }
       .PaddedButton {
         display: flex;

src/components/Footer/index.tsx

@@ -111,6 +111,7 @@ const Footer = () => {
   ];
 
   return (
+    <div className='container'>
     <section className={styles.FooterContainer} data-testid='footer-text'>
       <div className={styles.FooterBody}>
         <div className={styles.LogoWrapper}>
@@ -291,6 +292,7 @@ const Footer = () => {
         </div>
       </div>
     </section>
+    </div>
   );
 };
 

src/components/CustomTabs/custom-tabs.scss → src/components/custom-tabs/custom-tabs.scss

@@ -20,8 +20,8 @@
       align-items: center;
     }
     &__item {
-      padding: 10px 18px;
-      min-width: 17rem;
+      padding: 12px 18px;
+      min-width: 320px;
       cursor: pointer;
 
       @media screen and (max-width: 500px) {
@@ -38,19 +38,7 @@
       margin-block: 32px;
     }
   }
-
-  &_content {
-    width: 1310px;
-    margin: auto;
-
-    @media screen and (max-width: 1023px) {
-      width: 100%;
-    }
-  }
-}
-
-.tabs_content {
-  @media screen and (max-width: 1023px) {
+  &__content {
     width: 100%;
   }
 }

src/components/CustomTabs/index.tsx → src/components/custom-tabs/custom-tabs.tsx

@@ -25,7 +25,7 @@ const CustomTabs: React.FC<{
           ))}
         </div>
       </div>
-      <div className='tabs_content'>{tabs[activeTab].content}</div>
+      <div className='tabs__content'>{tabs[activeTab].content}</div>
     </div>
   );
 };

src/components/custom-tabs/index.ts

@@ -0,0 +1,3 @@
+import CustomTabs from './custom-tabs';
+
+export default CustomTabs;

src/features/Apiexplorer/Dropdown/Dropdown.module.scss

@@ -3,7 +3,6 @@
   user-select: none;
   border: 1px solid var(--ifm-color-gray-400);
   position: relative;
-  overflow-x: hidden;
 
   .arrow {
     background-size: rem(2.2);
@@ -21,24 +20,21 @@
   }
 
   .dropdownBtn {
-    padding: rem(0.5) rem(0.5);
+    padding: 4px 8px;
     background: var(--ifm-color-white);
     color: var(--ifm-color-black);
     display: flex;
     align-items: center;
-    cursor: pointer;
     justify-content: space-between;
     font-size: rem(1.6);
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   .dropdownContent {
     position: relative;
-    top: 110%;
-    padding-top: rem(1);
-    left: 0;
     background: var(--ifm-color-white);
     color: var(--ifm-color-black);
-    overflow: auto;
-    overflow-x: hidden;
   }
 }

src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss

@@ -1,15 +1,32 @@
 @use 'src/styles/utility' as *;
 
+
+.dropdownWrapper {
+  position: absolute;
+  top: 0;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 322px;
+  z-index: 1000;
+  background-color: var(--ifm-color-white);
+  border: 1px solid var(--ifm-color-gray-300);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.dropdownInputWrapper {
+  padding: 16px;
+}
+
 .dropdownSearch {
-  padding: rem(0.4);
-  margin: rem(1);
-  width: 97%;
+  padding: 4px;
+  width: 100%;
   box-sizing: border-box;
   border: 1px solid var(--ifm-color-gray-300);
 }
 
 .dropdownList {
-  max-height: rem(70);
+  --overlay-height: 260px;
+  height: var(--overlay-height);
   overflow: auto;
   .dropdownSelect {
     padding: 0;

src/features/Apiexplorer/Dropdown/DropdownList/index.tsx

@@ -44,16 +44,18 @@ const DropdownList: React.FC<TDropdownList> = ({
   const filteredOptions = filterOptions(playground_requests, searchResults);
 
   return (
-    <div>
-      <input
-        autoFocus
-        type='text'
-        data-testid='searchInput'
-        className={styles.dropdownSearch}
-        onChange={(event) => {
-          setSearchResults(event.target.value);
-        }}
-      />
+    <div className={styles.dropdownWrapper}>
+      <div className={styles.dropdownInputWrapper}>
+        <input
+          autoFocus
+          type='text'
+          data-testid='searchInput'
+          className={styles.dropdownSearch}
+          onChange={(event) => {
+            setSearchResults(event.target.value);
+          }}
+        />
+      </div>
       <div className={styles.dropdownList}>
         <div className={styles.dropdownSelect}>
           <span>

src/features/Apiexplorer/index.tsx

@@ -20,63 +20,65 @@ export default function ApiExplorerFeatures() {
   const has_info = Object.keys(request_info).length === 0;
   return (
     <>
-      <div className='breadcrumbs_wrapper'>
-        <Breadcrumbs
-          links={[
-            {
-              content: 'Home',
-              href: '/',
-              target: '_self',
-            },
-            {
-              content: 'API explorer',
-              href: '/api-explorer',
-              target: '_self',
-            },
-          ]}
-          size='md'
-        />
-      </div>
-      <div className={styles.playgroundContent}>
-        <Text type='heading-2' as='h1' className={styles.heading}>
-          API Explorer
-        </Text>
-        <div className={styles.pageWrapper}>
-          <div className={styles.playground}>
-            <div className={styles.playgroundPageWrapper}>
-              <div className={styles.playgroundApiJson}>
-                <Dropdown
-                  selected_value={text_data.selected_value}
-                  handleChange={handleSelectChange}
-                  selected={selected}
-                  setSelected={setSelected}
-                />
-                <RequestJSONBox
-                  request_example={text_data.request}
-                  handleChange={handleTextAreaInput}
-                  name={text_data.name}
-                  auth={request_info.auth_required}
-                />
-              </div>
-              {!has_info && (
-                <div
-                  id='playground'
-                  data-testid='playgroundDocs'
-                  className={styles.playgroundApiDocs}
-                >
-                  <div className={styles.schemaContainer}>
-                    <SchemaWrapper info={request_info} />
-                  </div>
-                  <div className={styles.schemaContainer}>
-                    <SchemaWrapper info={response_info} />
-                  </div>
+      <div className='container'>
+        <div className='breadcrumbs-wrapper'>
+          <Breadcrumbs
+            links={[
+              {
+                content: 'Home',
+                href: '/',
+                target: '_self',
+              },
+              {
+                content: 'API explorer',
+                href: '/api-explorer',
+                target: '_self',
+              },
+            ]}
+            size='md'
+          />
+        </div>
+        <div className={styles.playgroundContent}>
+          <Text type='heading-2' as='h1' className={styles.heading}>
+            API Explorer
+          </Text>
+          <div className={styles.pageWrapper}>
+            <div className={styles.playground}>
+              <div className={styles.playgroundPageWrapper}>
+                <div className={styles.playgroundApiJson}>
+                  <Dropdown
+                    selected_value={text_data.selected_value}
+                    handleChange={handleSelectChange}
+                    selected={selected}
+                    setSelected={setSelected}
+                  />
+                  <RequestJSONBox
+                    request_example={text_data.request}
+                    handleChange={handleTextAreaInput}
+                    name={text_data.name}
+                    auth={request_info.auth_required}
+                  />
                 </div>
-              )}
+                {!has_info && (
+                  <div
+                    id='playground'
+                    data-testid='playgroundDocs'
+                    className={styles.playgroundApiDocs}
+                  >
+                    <div className={styles.schemaContainer}>
+                      <SchemaWrapper info={request_info} />
+                    </div>
+                    <div className={styles.schemaContainer}>
+                      <SchemaWrapper info={response_info} />
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
-        <Footer />
       </div>
+      <Footer />
     </>
   );
 }

src/features/Apiexplorer/styles.module.scss

@@ -1,4 +1,5 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
 
 .schemaContainer {
   position: relative;
@@ -10,7 +11,6 @@
   justify-content: space-between;
   width: 100%;
   margin-top: rem(4);
-  min-height: 89vh;
 
   .heading {
     text-align: center;
@@ -20,11 +20,6 @@
     display: flex;
     color: var(--ifm-color-emphasis-1000);
 
-    @media screen and (min-width: 1440px) {
-      width: 1310px;
-      margin: auto;
-    }
-
     .playground {
       display: flex;
       justify-content: center;
@@ -38,7 +33,7 @@
         justify-content: center;
         width: 95%;
         gap: rem(2);
-        @media screen and (max-width: 1024px) {
+        @include tablet {
           flex-direction: column;
           align-items: center;
         }
@@ -51,7 +46,7 @@
   display: flex;
   flex-direction: column;
   width: 50%;
-  @media screen and (max-width: 1024px) {
+  @include tablet {
     width: 100%;
   }
 }
@@ -62,7 +57,7 @@
   gap: rem(2);
   margin-bottom: rem(1);
   width: 50%;
-  @media screen and (max-width: 1024px) {
+  @include tablet {
     width: 100%;
   }
 }

src/features/Auth/Login/Login.module.scss → src/features/Login/Login.module.scss

@@ -27,3 +27,7 @@
 .footer {
   width: 100%;
 }
+
+.action {
+  margin-top: rem(1.5);
+}