add base fields

Author: alexjs-dev

.env

@@ -1,2 +1,2 @@
-API_URL_A=https://forautobackend.herokuapp.com
-API_URL=http://localhost:3030
+API_URL=http://localhost
+ENV=development

.env.example

@@ -0,0 +1,3 @@
+# API_URL=https://forautobackend.herokuapp.com
+API_URL=http://localhost
+ENV=development

components/AuthForm/parts/SignInForm.js

@@ -14,6 +14,7 @@ import {
   FacebookButton,
   LanguageList,
 } from '~components'
+import config from '../../../config'
 
 const formName = 'signInForm'
 
@@ -25,14 +26,14 @@ const Component = ({ handleSubmit, onSubmit, children, title }) => {
       {title && <h4>{title}</h4>}
       <div className={styles.social}>
         <GoogleButton
-          title="Sign in with Google"
-          href="https://forautobackend.herokuapp.com/oauth/google"
+          title={t('button.signInWithGoogle')}
+          href={config.oauthUrls.google}
         />
       </div>
       <div className={styles.social}>
         <FacebookButton
-          title="Sign in with Facebook"
-          href="https://forautobackend.herokuapp.com/oauth/facebook"
+          title={t('button.signInWithFacebook')}
+          href={config.oauthUrls.facebook}
         />
       </div>
       {children}

components/AuthForm/parts/SignUpForm.js

@@ -10,6 +10,7 @@ import {
   GoogleButton,
   FacebookButton,
 } from '~components'
+import config from '../../../config'
 
 const formName = 'signUpForm'
 
@@ -19,7 +20,7 @@ const Component = ({ onSubmit, children, handleSubmit, title }) => {
   return (
     <form className={styles.container}>
       <div className={styles.disclaimer}>
-        <span>🤞 We do not share any of your personal information with third parties.</span>
+      <span>{t('titles.registrationDisclaimer')}</span>
       </div>
       {title && <h4>{title}</h4>}
       {/* {children}
@@ -28,15 +29,15 @@ const Component = ({ onSubmit, children, handleSubmit, title }) => {
       </Button> */}
       <div className={styles.social}>
         <GoogleButton
-          title="Sign up with Google"
-          href="https://forautobackend.herokuapp.com/oauth/google"
+          title={t('button.signUpWithGoogle')}
+          href={config.oauthUrls.google}
         />
       </div>
 
       <div className={styles.social}>
         <FacebookButton
-          title="Sign up with Facebook"
-          href="https://forautobackend.herokuapp.com/oauth/facebook"
+          title={t('button.signUpWithFacebook')}
+          href={config.oauthUrls.facebook}
         />
       </div>
       <Spacer className={styles.spacer} />

components/Button/Button.js

@@ -9,6 +9,7 @@ class Button extends React.PureComponent {
   static types = {
     PRIMARY: 'primary',
     GHOST: 'ghost',
+    TEXT: 'text',
   }
 
   static colors = {
@@ -72,7 +73,7 @@ Button.propTypes = {
   label: PropTypes.string,
   className: PropTypes.string,
   visible: PropTypes.bool,
-  type: PropTypes.oneOf(['primary', 'ghost']),
+  type: PropTypes.oneOf(['primary', 'ghost', 'text']),
   color: PropTypes.oneOf(['green', 'white', 'red']),
   icon: PropTypes.string,
   disabled: PropTypes.bool,

components/Button/Button.module.scss

@@ -61,6 +61,8 @@
   border: 1px solid $color-dark-gray;
 }
 
+
+
 .ghost {
   border: $border-primary;
   color: $color-primary;
@@ -85,6 +87,20 @@
   }
 }
 
+.text {
+  border: none;
+  background: transparent;
+  color: $color-primary;
+  border-radius: none;
+  font-weight: $font-weight-bold;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.red {
+    color: $color-red;
+  }
+}
+
 .iconOnly {
   width: 38px;
   height: 38px;

components/Header/DesktopHeader.js

@@ -18,6 +18,7 @@ import {
   Button,
   BaseButton,
   NavigationDropdown,
+  LanguageList,
 } from '~components'
 import LogoIcon from '~public/logo.svg'
 import HeaderActionIcon from './HeaderActionIcon'
@@ -85,15 +86,15 @@ const DesktopHeader = () => {
     }
     return (
       <section>
-        <LanguageSwitch />
         <Button
           isInternalLink
-          href="/sign-in"
-          type={Button.types.PRIMARY}
-          className={classNames(styles.spacingLarge, styles.actionButton)}
+          href="/sign-up"
+          type="text"
+          className={styles.actionButton}
         >
-          {t('button.signIn')}
+          {t('button.signUp')}
         </Button>
+        <LanguageSwitch className={styles.spacingLarge} />
         <NavigationDropdown open={drawerOpen} setOpen={setDrawerOpen}>
           <BaseButton
             onClick={() => setDrawerOpen(!drawerOpen)}

components/Header/DesktopHeader.module.scss

@@ -130,7 +130,7 @@
 }
 
 .actionButton {
-  padding: 0 spacing(2);
+  padding: 0;
   min-height: unset;
   height: 34px;
 }

components/LanguageSwitch/LanguageSwitch.js

@@ -28,9 +28,10 @@ const languages = {
   },
 }
 
-const Drawer = React.memo(() => {
+const Drawer = React.memo(({open}) => {
   const { i18n } = useTranslation()
   const { language = 'en' } = i18n
+  if (!open) return null
   return (
     <div className={styles.drawer}>
       {map(languages, (lang, key) => {
@@ -56,13 +57,13 @@ const LanguageSwitch = ({ className }) => {
   const { i18n } = useTranslation()
   const { language = 'en' } = i18n
   useOutsideClick({ ref, isOpen: open, setOpen })
-  if (!open) return null
+  // if (!open) return null
   return (
     <div className={classNames(styles.container, className)} ref={ref}>
       <BaseButton onClick={() => setOpen(!open)}>
         {languages[language].icon}
       </BaseButton>
-      <Drawer />
+      <Drawer open={open} />
     </div>
   )
 }

components/LanguageSwitch/LanguageSwitch.module.scss

@@ -12,16 +12,31 @@
 	}
 }
 
+@keyframes appear {
+	0% {
+		transform: scale(0) translate(0, 100%);
+		opacity: 0;
+		visibility: visible;
+	}
+	80% {
+		transform: scale(1.2) translate(0, 100%);
+	}
+	100% {
+		transform: scale(1) translate(0, 100%);
+		opacity: 1;
+	}
+}
+
 .container {
 	position: relative;
 	.drawer {
-		animation: slideInDown .3s ease-in-out;
+		animation: appear .6s ease-in-out;
 		animation-fill-mode: forwards;
 		position: absolute;
-		bottom: - spacing(2);
-		transform: translate(0, 100%);
+		bottom: 0;
 		left: -100%;
 		min-height: 44px;
+		transform: translate(0, -100%);
 		padding: spacing(1) 0;
 		min-width: 80px;
 		background-color: $color-dark;