Merge pull request #5 from DesignSystemsOSS/development

Views updated
DesignSystemsOSS · Sep 12, 2021 · 3e7b5e5 · 3e7b5e5 · vercel · Sep 12, 2021
2 parents a4d72e4 + b7b57c5
commit 3e7b5e5
Show file tree

Hide file tree

Showing 25 changed files with 215 additions and 59 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/tds_logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>The DesignSystems - We are building frontend solutions for developers</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "The DesignSystems",
+  "name": "We are building frontend solutions for developers",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "tds_logo.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/public/tds_logo.ico b/public/tds_logo.ico
diff --git a/src/components/section-components/Header/index.js b/src/components/section-components/Header/index.js
@@ -8,19 +8,29 @@ export default function Header() {
   return (
     <header className="header">
       <a href="/" className="logo-wrapper-link">
-        <div className="logo-wrapper">
-          <h1 className="demo-logo-icon">DS</h1>
+        <div className="logo-wrapper color-change-4x">
+          {/* <div className="logo-gradient-circle"> */}
+            <h1 className="demo-logo-icon">DS</h1>
+          {/* </div> */}
           <p className="logo-title">The DesignSystems</p>
         </div>
       </a>
       <div className="header-options-wrapper">
         <ul className="header-options-list">
           {headerOptions.map((data, index) => {
-            return (
-              <li className="header-option" key={index}>
-                <a href={data.path} className="header-option-path">{data.title}</a>
-              </li>
-            )
+            if (data.title.toLowerCase() === 'careers') {
+              return (
+                <li className="header-option" key={index}>
+                  <a href={data.path} className="header-option-path">{data.title} <span className="gradient-text">#WeAreHiring</span></a>
+                </li>
+              )
+            } else {
+              return (
+                <li className="header-option" key={index}>
+                  <a href={data.path} className="header-option-path">{data.title}</a>
+                </li>
+              )
+            }
           })}
         </ul>
         <div className="account-cta-buttons-wrapper">

diff --git a/src/components/section-components/Header/style.header.css b/src/components/section-components/Header/style.header.css
diff --git a/src/components/section-components/Header/style.header.css.map b/src/components/section-components/Header/style.header.css.map
diff --git a/src/components/section-components/Header/style.header.scss b/src/components/section-components/Header/style.header.scss
@@ -30,4 +30,22 @@ header.header {
       gap: 20px;
     }
   }
+}
+
+.color-change-4x {
+  animation: color-change-4x 3s linear infinite alternate both;
+}
+@keyframes color-change-4x {
+  0% {
+    color: #ff61d3;
+  }
+  33.3333% {
+    color: #b318ff;
+  }
+  66.666% {
+    color: #00f0ff;
+  }
+  100% {
+    color: #006eff;
+  }
 }
diff --git a/src/components/widgets/Cards/CareerOpeningCard/index.js b/src/components/widgets/Cards/CareerOpeningCard/index.js
@@ -5,8 +5,10 @@ import './style.widgets.cards.career-opening-card.css';
 export default function CareerOpeningCard(__CareerOpeningCardDetails) {
   return (
     <div className="career-opening-card">
-      <h3 className="career-role-title">{__CareerOpeningCardDetails.RoleTitle}</h3>
-      <p className="career-role-description">{__CareerOpeningCardDetails.RoleDescription}</p>
+      <div className="career-role-details">
+        <h3 className="career-role-title">{__CareerOpeningCardDetails.RoleTitle}</h3>
+        <p className="career-role-description">{__CareerOpeningCardDetails.RoleDescription}</p>
+      </div>
       <Button type="primary" value="Apply for this role" onClick={() => window.open(__CareerOpeningCardDetails.RegistrationFormURL)} />
     </div>
   )

diff --git a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css
diff --git a/...omponents/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map b/...omponents/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map
diff --git a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss
@@ -1,10 +1,13 @@
 div.career-opening-card {
-  width: 360px;
+  width: 90%;
   margin: auto;
   padding: 2.4em 1.2em;
   background-color: #ffffff;
   border-radius: 6px;
   color: black;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   transition: 0.2s ease-in-out;
   &:hover {
     cursor: pointer;

diff --git a/src/styles/base-styles/body/index.css b/src/styles/base-styles/body/index.css
diff --git a/src/styles/base-styles/body/index.css.map b/src/styles/base-styles/body/index.css.map
diff --git a/src/styles/base-styles/body/index.scss b/src/styles/base-styles/body/index.scss
@@ -5,6 +5,25 @@ body {
   background-size: cover;
   background-attachment: fixed;
   font-family: var(--font-inter);
+
+  ::selection {
+    // color: white;
+    background-color: #00186F33;
+  }
+}
+
+body::-webkit-scrollbar {
+  width: 10px;               /* width of the entire scrollbar */
+}
+
+body::-webkit-scrollbar-track {
+  background: #f2f2f2;        /* color of the tracking area */
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #12121266;    /* color of the scroll thumb */
+  border-radius: 20px;       /* roundness of the scroll thumb */
+  border: 3px solid #f2f2f2;  /* creates padding around scroll thumb */
 }
 
 .center__view {

diff --git a/src/views/Careers/__careers.json b/src/views/Careers/__careers.json
@@ -5,21 +5,9 @@
     "role_type": "volunteer",
     "register_form_url": "https://form.typeform.com/to/TxpF9YQT"
   },{
-    "role_title": "Technical Content Writer",
-    "role_description": "For managing documentations and websites/products content",
-    "role_type": "volunteer",
-    "register_form_url": "https://form.typeform.com/to/TxpF9YQT"
-  },{
-    "role_title": "Technical Content Writer",
-    "role_description": "For managing documentations and websites/products content",
+    "role_title": "UI Designer",
+    "role_description": "For creating UIs and frontend components for our products and websites",
     "role_type": "volunteer",
-    "register_form_url": "https://form.typeform.com/to/TxpF9YQT"
-  },
-  {
-    "role_title": "Technical Content Writer",
-    "role_description": "For managing documentations and websites/products content",
-    "role_type": "volunteer",
-    "register_form_url": "https://form.typeform.com/to/TxpF9YQT"
+    "register_form_url": "https://form.typeform.com/to/So6ackyF"
   }
-
 ]
diff --git a/src/views/Careers/style.view-careers.css b/src/views/Careers/style.view-careers.css
diff --git a/src/views/Careers/style.view-careers.css.map b/src/views/Careers/style.view-careers.css.map
diff --git a/src/views/Careers/style.view-careers.scss b/src/views/Careers/style.view-careers.scss
@@ -10,14 +10,17 @@ div.careers {
     font-size: 20px;
   }
   > div.volunteer-roles-section {
-    margin-top: 8em;
+    width: 90%;
+    margin-top: 3em;
+    margin-right: auto;
+    margin-left: auto;
     > h3.volunteer-roles-title {
       text-align: center;
     }
     > div.volunteer-roles-wrapper {
       margin-top: 3em;
       display: grid;
-      grid-template-columns: auto auto auto;
+      grid-template-columns: auto;
       margin-right: auto;
       margin-left: auto;
       row-gap: 3em;

diff --git a/src/views/LandingPage/__languages.json b/src/views/LandingPage/__languages.json
diff --git a/src/views/LandingPage/index.js b/src/views/LandingPage/index.js
@@ -16,14 +16,30 @@ export default function LandingPage() {
         The DesignSystems' tools helps you write more scalable code without worrying about design mistakes. Built for developers and teams to save their time.
       </p>
       <div className="cta-buttons-wrapper button-wrapper button-wrapper-center">
-        <Button value="Get started" type="primary" />
-        <Button value="Check our GitHub" type="outline" startIcon="fab fa-github" onClick={() => window.open('https://www.github.com/DesignSystemsOSS')} />
+        <Button value="Join our Discord" type="primary" startIcon="fab fa-discord" />
+        <a href="https://www.github.com/DesignSystemsOSS" target="_blank" rel="noreferrer">
+        <Button value="Check our GitHub" type="outline" startIcon="fab fa-github" />
+        </a>
       </div>
 
       {/* about the-design-systems */} 
       <div className="about-the-design-systems-section-wrapper">
 
       </div>
+
+      {/* Get in touch section */}
+      <div className="get-in-touch-section gradient">
+        <div className="get-in-touch-section-wrapper">
+          <h2 className="get-in-touch-title">
+            Get in touch with <span className="gradient-text">The DesignSystems Community</span>
+          </h2>
+          <div className="social-icons-wrapper button-wrapper">
+            <Button type="outline" value="Follow us on Twitter" startIcon="fab fa-twitter" />
+            <Button type="primary" value="Join Discord Community" startIcon="fab fa-discord" />
+          </div>
+        </div>
+      </div>
+
     </div>
   )
 }