Merge branch 'develop' into feat/new-auth-screens

* fix: New authentication pages

* chore: Updated SVG

* chore: MInor fixes

* chore: Minor fixes

* chore: Code clean up

* chore: Code cleanup

app/javascript/dashboard/assets/scss/widgets/_login.scss

@@ -1,8 +1,5 @@
-.auth-wrap {
-  width: 100%;
-}
-
 // Outside login wrapper
+// Super admin login page
 .login {
   @include full-height;
   overflow-y: auto;
@@ -64,3 +61,39 @@
     }
   }
 }
+
+// Dashboard view
+.auth-screen--view {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+}
+
+.flex-divided-view {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.form--wrap {
+  padding: 0 var(--space-mega);
+}
+
+.auth-screen--footer {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  margin: var(--space-two) 0;
+}
+
+@media screen and (max-width: 1200px) {
+  .flex-divided-view {
+    display: flex;
+    flex: 0.9;
+    justify-content: center;
+  }
+
+  .form--wrap {
+    padding: 0 var(--space-two);
+  }
+}

app/javascript/dashboard/i18n/locale/en/login.json

@@ -1,6 +1,7 @@
 {
   "LOGIN": {
     "TITLE": "Login to Chatwoot",
+    "DESCRIPTION": "Login to your Chatwoot account",
     "EMAIL": {
       "LABEL": "Email",
       "PLACEHOLDER": "Email eg: someone@example.com"

app/javascript/dashboard/i18n/locale/en/resetPassword.json

@@ -1,6 +1,7 @@
 {
   "RESET_PASSWORD": {
     "TITLE": "Reset Password",
+    "DESCRIPTION": "Enter your email address",
     "EMAIL": {
       "LABEL": "Email",
       "PLACEHOLDER": "Please enter your email",

app/javascript/dashboard/i18n/locale/en/setNewPassword.json

@@ -1,6 +1,7 @@
 {
   "SET_NEW_PASSWORD": {
     "TITLE": "Set New Password",
+    "DESCRIPTION": "Enter your new password",
     "PASSWORD": {
       "LABEL": "Password",
       "PLACEHOLDER": "Password",

app/javascript/dashboard/i18n/locale/en/signup.json

@@ -1,7 +1,7 @@
 {
   "REGISTER": {
-    "TRY_WOOT": "Register an account",
+    "TITLE": "Sign Up",
-    "TITLE": "Register",
+    "TRY_WOOT": "Create your Chatwoot account",
     "TERMS_ACCEPT": "By signing up, you agree to our <a href=\"https://www.chatwoot.com/terms\">T & C</a> and <a href=\"https://www.chatwoot.com/privacy-policy\">Privacy policy</a>",
     "ACCOUNT_NAME": {
       "LABEL": "Account name",

app/javascript/dashboard/routes/auth/Auth.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="row auth-wrap login align-center">
+  <div class="row auth-screen--view align-center">
     <router-view />
+    <auth-right-screen />
   </div>
 </template>
+<script>
+import AuthRightScreen from 'dashboard/routes/auth/components/AuthRightScreen';
+export default {
+  components: {
+    AuthRightScreen,
+  },
+};
+</script>

app/javascript/dashboard/routes/auth/Confirmation.vue

@@ -1,5 +1,7 @@
 <template>
+  <div class="flex-divided-view">
     <loading-state :message="$t('CONFIRM_EMAIL')" />
+  </div>
 </template>
 <script>
 import LoadingState from '../../components/widgets/LoadingState';

app/javascript/dashboard/routes/auth/PasswordEdit.vue

@@ -1,59 +1,74 @@
 <template>
-  <form
+  <div class="password-edit flex-divided-view">
-    class="login-box medium-4 column align-self-middle"
+    <div class="form--wrap w-full">
-    @submit.prevent="login()"
+      <auth-header
-  >
+        :title="$t('SET_NEW_PASSWORD.TITLE')"
-    <div class="column log-in-form">
+        :sub-title="$t('SET_NEW_PASSWORD.DESCRIPTION')"
-      <h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
+      />
-      <label :class="{ error: $v.credentials.password.$error }">
+      <form class="" @submit.prevent="login()">
-        {{ $t('LOGIN.PASSWORD.LABEL') }}
+        <div class="input-wrap">
-        <input
+          <auth-input
             v-model.trim="credentials.password"
             type="password"
             :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+            icon-name="lock-closed"
+            :class="{ error: $v.credentials.password.$error }"
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :error="
+              $v.credentials.password.$error
+                ? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
+                : ''
+            "
             @input="$v.credentials.password.$touch"
+            @blur="$v.credentials.password.$touch"
           />
-        <span v-if="$v.credentials.password.$error" class="message">
+          <auth-input
-          {{ $t('SET_NEW_PASSWORD.PASSWORD.ERROR') }}
-        </span>
-      </label>
-      <label :class="{ error: $v.credentials.confirmPassword.$error }">
-        {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL') }}
-        <input
             v-model.trim="credentials.confirmPassword"
             type="password"
+            icon-name="lock-shield"
+            :class="{ error: $v.credentials.confirmPassword.$error }"
+            :label="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL')"
             :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+            :error="
+              $v.credentials.confirmPassword.$error
+                ? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
+                : ''
+            "
+            @blur="$v.credentials.confirmPassword.$touch"
             @input="$v.credentials.confirmPassword.$touch"
           />
-        <span v-if="$v.credentials.confirmPassword.$error" class="message">
+        </div>
-          {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
+        <auth-submit-button
-        </span>
+          :label="$t('SET_NEW_PASSWORD.SUBMIT')"
-      </label>
+          :is-disabled="
-      <woot-submit-button
-        :disabled="
             $v.credentials.password.$invalid ||
               $v.credentials.confirmPassword.$invalid ||
               newPasswordAPI.showLoading
           "
-        :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :is-loading="newPasswordAPI.showLoading"
-        :loading="newPasswordAPI.showLoading"
+          icon="arrow-chevron-right"
-        button-class="expanded"
+          @click="login()"
         />
         <!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
-    </div>
       </form>
+    </div>
+  </div>
 </template>
 
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import AuthInput from './components/AuthInput';
+import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
+import AuthSubmitButton from './components/AuthSubmitButton';
 
-import WootSubmitButton from '../../components/buttons/FormSubmitButton';
 import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 export default {
   components: {
-    WootSubmitButton,
+    AuthInput,
+    AuthHeader,
+    AuthSubmitButton,
   },
   props: {
     resetPasswordToken: { type: String, default: '' },
@@ -130,3 +145,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.password-edit {
+  flex-direction: column;
+  margin: var(--space-larger) 0;
+}
+
+.input-wrap {
+  padding-bottom: var(--space-one);
+}
+</style>

app/javascript/dashboard/routes/auth/ResetPassword.vue

@@ -1,37 +1,54 @@
 <template>
-  <form
+  <div class="reset--password flex-divided-view">
-    class="login-box medium-4 column align-self-middle"
+    <div class="form--wrap w-full">
-    @submit.prevent="submit()"
+      <auth-header
-  >
+        :title="$t('RESET_PASSWORD.TITLE')"
-    <h4>{{ $t('RESET_PASSWORD.TITLE') }}</h4>
+        :sub-title="$t('RESET_PASSWORD.DESCRIPTION')"
-    <div class="column log-in-form">
-      <label :class="{ error: $v.credentials.email.$error }">
-        {{ $t('RESET_PASSWORD.EMAIL.LABEL') }}
-        <input
-          v-model.trim="credentials.email"
-          type="text"
-          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="$v.credentials.email.$touch"
       />
-        <span v-if="$v.credentials.email.$error" class="message">
+      <form class="w-full" @submit.prevent="submit()">
-          {{ $t('RESET_PASSWORD.EMAIL.ERROR') }}
+        <div>
-        </span>
+          <auth-input
-      </label>
+            v-model.trim="credentials.email"
-      <woot-submit-button
+            type="email"
-        :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
+            icon-name="mail"
-        :button-text="$t('RESET_PASSWORD.SUBMIT')"
+            :class="{ error: $v.credentials.email.$error }"
-        :loading="resetPassword.showLoading"
+            :label="$t('RESET_PASSWORD.EMAIL.LABEL')"
-        button-class="expanded"
+            :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+            :error="
+              $v.credentials.email.$error
+                ? $t('RESET_PASSWORD.EMAIL.ERROR')
+                : ''
+            "
+            @blur="$v.credentials.email.$touch"
           />
         </div>
+        <auth-submit-button
+          :label="$t('RESET_PASSWORD.SUBMIT')"
+          :is-disabled="
+            $v.credentials.email.$invalid || resetPassword.showLoading
+          "
+          :is-loading="resetPassword.showLoading"
+          icon="arrow-chevron-right"
+          @click="submit()"
+        />
       </form>
+    </div>
+  </div>
 </template>
 
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import AuthInput from './components/AuthInput';
+import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
+import AuthSubmitButton from './components/AuthSubmitButton';
 
 export default {
+  components: {
+    AuthInput,
+    AuthHeader,
+    AuthSubmitButton,
+  },
   data() {
     return {
       // We need to initialize the component with any
@@ -82,3 +99,9 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.reset--password {
+  flex-direction: column;
+  margin: var(--space-larger) 0;
+}
+</style>

app/javascript/dashboard/routes/auth/Signup.vue

@@ -1,22 +1,20 @@
 <template>
-  <div class="medium-10 column signup">
+  <!-- <div class="row signup"> -->
-    <div class="text-center medium-12 signup--hero">
+  <div class="sign-up flex-divided-view">
-      <img
+    <div class="form--wrap w-full">
-        :src="globalConfig.logo"
+      <auth-header
-        :alt="globalConfig.installationName"
+        :title="$t('REGISTER.TITLE')"
-        class="hero--logo"
+        :sub-title="$t('REGISTER.TRY_WOOT')"
       />
-      <h2 class="hero--title">
+
-        {{ $t('REGISTER.TRY_WOOT') }}
+      <div class="w-ful column">
-      </h2>
+        <form @submit.prevent="submit">
-    </div>
+          <div class="input-wrap">
-    <div class="row align-center">
+            <auth-input
-      <div class="small-12 medium-6 large-5 column">
-        <form class="signup--box login-box" @submit.prevent="submit">
-          <woot-input
               v-model="credentials.fullName"
               :class="{ error: $v.credentials.fullName.$error }"
               :label="$t('REGISTER.FULL_NAME.LABEL')"
+              icon-name="person"
               :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
               :error="
                 $v.credentials.fullName.$error
@@ -25,10 +23,11 @@
               "
               @blur="$v.credentials.fullName.$touch"
             />
-          <woot-input
+            <auth-input
               v-model.trim="credentials.email"
               type="email"
               :class="{ error: $v.credentials.email.$error }"
+              icon-name="mail"
               :label="$t('REGISTER.EMAIL.LABEL')"
               :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
               :error="
@@ -36,9 +35,10 @@
               "
               @blur="$v.credentials.email.$touch"
             />
-          <woot-input
+            <auth-input
               v-model="credentials.accountName"
               :class="{ error: $v.credentials.accountName.$error }"
+              icon-name="person-account"
               :label="$t('REGISTER.ACCOUNT_NAME.LABEL')"
               :placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
               :error="
@@ -48,15 +48,17 @@
               "
               @blur="$v.credentials.accountName.$touch"
             />
-          <woot-input
+            <auth-input
               v-model.trim="credentials.password"
               type="password"
               :class="{ error: $v.credentials.password.$error }"
+              icon-name="lock-closed"
               :label="$t('LOGIN.PASSWORD.LABEL')"
               :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
               :error="passwordErrorText"
               @blur="$v.credentials.password.$touch"
             />
+          </div>
           <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
             <vue-hcaptcha
               ref="hCaptcha"
@@ -71,15 +73,16 @@
               {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
             </span>
           </div>
-          <woot-submit-button
+          <auth-submit-button
-            :disabled="isSignupInProgress || !hasAValidCaptcha"
+            :label="$t('REGISTER.SUBMIT')"
-            :button-text="$t('REGISTER.SUBMIT')"
+            :is-disabled="isSignupInProgress || !hasAValidCaptcha"
-            :loading="isSignupInProgress"
+            :is-loading="isSignupInProgress"
-            button-class="large expanded"
+            icon="arrow-chevron-right"
+            @click="submit"
           />
           <p v-dompurify-html="termsLink" class="accept--terms" />
         </form>
-        <div class="column text-center sigin--footer">
+        <div class="column text-center auth-screen--footer">
           <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
           <router-link to="/app/login">
             {{
@@ -103,9 +106,15 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import { DEFAULT_REDIRECT_URL } from '../../constants';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
+import AuthInput from './components/AuthInput';
+import AuthHeader from './components/AuthHeader';
+import AuthSubmitButton from './components/AuthSubmitButton';
 import { isValidPassword } from 'shared/helpers/Validators';
 export default {
   components: {
+    AuthInput,
+    AuthHeader,
+    AuthSubmitButton,
     VueHcaptcha,
   },
   mixins: [globalConfigMixin, alertMixin],
@@ -214,51 +223,20 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.signup {
+.sign-up {
-  .signup--hero {
+  margin: var(--space-medium) 0;
-    margin-bottom: var(--space-larger);
+}
 
-    .hero--logo {
+.input-wrap {
-      width: 180px;
+  padding-bottom: var(--space-slab);
-    }
+}
 
-    .hero--title {
+.accept--terms {
-      margin-top: var(--space-large);
-      font-weight: var(--font-weight-light);
-    }
-  }
-
-  .signup--box {
-    padding: var(--space-large);
-
-    label {
-      font-size: var(--font-size-default);
-      color: var(--b-600);
-
-      input {
-        padding: var(--space-slab);
-        height: var(--space-larger);
-        font-size: var(--font-size-default);
-      }
-    }
-  }
-
-  .sigin--footer {
-    padding: var(--space-medium);
-    font-size: var(--font-size-default);
-
-    > a {
-      font-weight: var(--font-weight-bold);
-    }
-  }
-
-  .accept--terms {
-    font-size: var(--font-size-small);
   text-align: center;
   margin: var(--space-normal) 0 0 0;
-  }
+}
 
-  .h-captcha--box {
+.h-captcha--box {
   margin-bottom: var(--space-one);
 
   .captcha-error {
@@ -272,6 +250,12 @@ export default {
       border-radius: var(--border-radius-normal);
     }
   }
+}
+
+@media screen and (max-width: 1200px) {
+  .sign-up {
+    margin-top: var(--space-larger);
+    width: 100%;
   }
 }
 </style>

app/javascript/dashboard/routes/auth/components/AuthHeader.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="w-full">
+    <img :src="globalConfig.logoThumbnail" class="hero--logo" />
+    <div class="header--wrap">
+      <span class="hero--title">
+        {{ title }}
+      </span>
+      <h6 class="hero-sub--title">
+        {{ subTitle }}
+      </h6>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+export default {
+  mixins: [globalConfigMixin],
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.hero--logo {
+  width: 60px;
+}
+
+.header--wrap {
+  margin: var(--space-large) 0 3.6rem 0;
+}
+
+.hero--title {
+  font-size: var(--font-size-giga);
+  font-weight: var(--font-weight-bold);
+}
+
+.hero-sub--title {
+  font-size: var(--font-size-small);
+  color: var(--b-500);
+}
+</style>

app/javascript/dashboard/routes/auth/components/AuthInput.vue

@@ -0,0 +1,93 @@
+<template>
+  <label class="auth-input--wrap">
+    <div class="label-wrap">
+      <fluent-icon v-if="iconName" :icon="iconName" size="16" />
+      <span v-if="label">{{ label }}</span>
+    </div>
+    <div class="input--wrap">
+      <input
+        class="auth-input"
+        :value="value"
+        :type="type"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        @input="onChange"
+        @blur="onBlur"
+      />
+      <p v-if="helpText" class="help-text" />
+      <span v-if="error" class="message">
+        {{ error }}
+      </span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    helpText: {
+      type: String,
+      default: '',
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onChange(e) {
+      this.$emit('input', e.target.value);
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.auth-input--wrap {
+  .label-wrap {
+    display: flex;
+    align-items: center;
+    color: var(--s-900);
+    margin-bottom: var(--space-small);
+
+    span {
+      margin-left: var(--space-small);
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .auth-input {
+    font-size: var(--font-size-small) !important;
+    height: 4.2rem !important;
+    padding: var(--space-small) !important;
+    width: 100% !important;
+    background: var(--b-50) !important;
+  }
+}
+</style>

app/javascript/dashboard/routes/auth/components/AuthRightScreen.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="image--wrap">
+    <div class="image">
+      <img src="./assets/top-left.svg" class="top-left--img absolute" />
+      <div class="center-container">
+        <div>
+          <img src="./assets/background.svg" class="center--img" />
+          <div v-show="showTestimonials" class="image-bottom--text">
+            <h3 class="heading">
+              {{ 'Loved by small and big teams, alike ' }}
+            </h3>
+            <span class="sub-block-title sub-heading">{{
+              'We put your needs first. That is what keeps us going.'
+            }}</span>
+          </div>
+          <div v-show="!showTestimonials" class="image-bottom--text">
+            <h3 class="heading">{{ 'Get Realtime Reports ' }}</h3>
+            <span class="sub-block-title sub-heading">{{
+              'Stay on top of SLAs, agents, inboxes, multiple channels'
+            }}</span>
+          </div>
+        </div>
+        <div v-show="showTestimonials">
+          <div class="testimonial-left--card testimonial-card absolute">
+            <div class="left-card--wrap absolute">
+              <div class="left-card--content">
+                <p class="card-content">
+                  {{ LEFT_CARD.AUTHOR_REVIEW }}
+                </p>
+                <div class="content-author--details row">
+                  <div class="author-image--wrap">
+                    <img :src="LEFT_CARD.AUTHOR_IMAGE" class="author-image" />
+                  </div>
+                  <div class="author-name-company--details">
+                    <span class="author-name">
+                      {{ LEFT_CARD.AUTHOR_NAME }}
+                    </span>
+                    <span class="author-company">{{
+                      LEFT_CARD.AUTHOR_COMAPNY
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-right--card testimonial-card absolute">
+            <div class="right-card--wrap absolute">
+              <div class="right-card--content">
+                <p class="card-content">
+                  {{ RIGHT_CARD.AUTHOR_REVIEW }}
+                </p>
+                <div class="content-author--details row">
+                  <div class="author-image--wrap">
+                    <img :src="RIGHT_CARD.AUTHOR_IMAGE" class="author-image" />
+                  </div>
+                  <div class="author-name-company--details">
+                    <span class="author-name">
+                      {{ RIGHT_CARD.AUTHOR_NAME }}
+                    </span>
+                    <span class="author-company">{{
+                      RIGHT_CARD.AUTHOR_COMAPNY
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-show="!showTestimonials">
+          <img
+            src="./assets/reports-left-card.svg"
+            class="reports-card absolute reports-left-card"
+          />
+          <img
+            src="./assets/reports-right-card.svg"
+            class="reports-card absolute reports-right-card"
+          />
+        </div>
+      </div>
+      <img src="./assets/bottom-right.svg" class="bottom-right--img absolute" />
+    </div>
+  </div>
+</template>
+
+<script>
+import testimonialConstants from '../testimonialsConstants';
+export default {
+  data() {
+    return {
+      showTestimonials: false,
+      timer: null,
+      LEFT_CARD: testimonialConstants.LEFT_CARD,
+      RIGHT_CARD: testimonialConstants.RIGHT_CARD,
+    };
+  },
+  mounted() {
+    this.switchImage();
+  },
+  beforeDestroy() {
+    this.clearTimer();
+  },
+  methods: {
+    switchImage() {
+      this.timer = setTimeout(() => {
+        this.showTestimonials = !this.showTestimonials;
+        this.switchImage();
+      }, 5000);
+    },
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/woot';
+
+.absolute {
+  position: absolute;
+}
+
+.image--wrap {
+  background: #56b9fc;
+  display: flex;
+  flex: 1 1;
+
+  .image {
+    align-items: center;
+    display: flex;
+    flex: 1 1;
+    justify-content: center;
+    position: relative;
+
+    .top-left--img {
+      height: var(--space-giga);
+      left: 0;
+      top: 0;
+      width: var(--space-giga);
+    }
+
+    .center-container {
+      padding: var(--space-medium) 0;
+      z-index: var(--z-index-low);
+      .center--img {
+        height: 72rem;
+        width: 72rem;
+      }
+    }
+    .bottom-right--img {
+      bottom: 0;
+      height: 28rem;
+      right: 0;
+      width: 28rem;
+    }
+
+    .image-bottom--text {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      .heading {
+        color: var(--white);
+        font-weight: var(--font-weight-black);
+        font-size: var(--font-size-bigger);
+        margin-bottom: var(--space-small);
+      }
+      .sub-heading {
+        color: var(--white);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    .testimonial-card {
+      align-items: center;
+      background: var(--white);
+      box-shadow: var(--shadow-auth-page-card);
+      border-radius: var(--border-radius-normal);
+      display: flex;
+      height: 26rem;
+      justify-content: center;
+      left: 50%;
+      opacity: 0.92;
+      top: 50%;
+      width: 32rem;
+    }
+
+    .testimonial-left--card {
+      transform: translate(-82%, 0%);
+      .left-card--wrap {
+        width: var(--space-giga);
+        .left-card--content {
+          color: var(--s-800);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          width: 100%;
+        }
+      }
+    }
+    .testimonial-right--card {
+      transform: translate(-22%, -94%);
+      .right-card--wrap {
+        width: var(--space-giga);
+        .right-card--content {
+          color: var(--s-800);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          width: 100%;
+        }
+      }
+    }
+
+    .reports-card {
+      left: 50%;
+      top: 50%;
+      width: 38rem;
+    }
+
+    .reports-left-card {
+      transform: translate(-80%, 0%);
+    }
+    .reports-right-card {
+      transform: translate(-24%, -92%);
+    }
+
+    .content-author--details {
+      align-items: center;
+      display: flex;
+      margin-top: var(--space-small);
+      .author-image--wrap {
+        background: white;
+        border-radius: var(--border-radius-rounded);
+        padding: var(--space-smaller);
+        .author-image {
+          border-radius: var(--border-radius-rounded);
+          height: calc(var(--space-two) + var(--space-two));
+          width: calc(var(--space-two) + var(--space-two));
+        }
+      }
+
+      .author-name-company--details {
+        display: flex;
+        flex-direction: column;
+        margin-left: var(--space-small);
+        .author-name {
+          font-size: var(--font-size-small);
+          font-weight: var(--font-weight-bold);
+        }
+        .author-company {
+          font-size: var(--font-size-mini);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .image--wrap {
+    display: none;
+  }
+}
+
+@include breakpoint(xxxlarge up) {
+  .image--wrap .image {
+    .image-bottom--text {
+      .heading {
+        font-size: var(--font-size-mega);
+      }
+      .sub-heading {
+        font-size: var(--font-size-medium);
+      }
+    }
+
+    .content-author--details .author-name-company--details {
+      .author-name {
+        font-size: var(--font-size-default);
+      }
+      .author-company {
+        font-size: var(--font-size-small);
+      }
+    }
+
+    .center-container .center--img {
+      height: 86rem;
+      width: 86rem;
+    }
+
+    .reports-card {
+      width: 44rem;
+    }
+
+    .testimonial-card {
+      height: 30rem;
+      width: 38rem;
+      .card-content {
+        font-size: var(--font-size-default);
+      }
+    }
+
+    .testimonial-left--card .left-card--wrap {
+      width: 28rem;
+    }
+
+    .testimonial-right--card .right-card--wrap {
+      width: 28rem;
+    }
+  }
+}
+</style>

app/javascript/dashboard/routes/auth/components/AuthSubmitButton.vue

@@ -0,0 +1,55 @@
+<template>
+  <woot-button
+    size="expanded"
+    color-scheme="primary"
+    class-names="submit--button"
+    :is-disabled="isDisabled"
+    :is-loading="isLoading"
+    @click="onClick"
+  >
+    {{ label }}
+    <fluent-icon :icon="icon" size="18" />
+  </woot-button>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.submit--button {
+  display: flex;
+  align-items: center;
+  margin: 0 0 var(--space-normal) 0;
+
+  &::v-deep .button__content {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

app/javascript/dashboard/routes/auth/components/assets/bottom-right.svg

@@ -0,0 +1,3 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H600V200H400V400H200V600H0V800H200H400H600H800V600V400V200V0Z" fill="#2773E4" fill-opacity="0.42"/>
+</svg>

app/javascript/dashboard/routes/auth/components/assets/top-left.svg

@@ -0,0 +1,3 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0V200V400V600H200V400H400V200H600V0H400H200Z" fill="#2773E4" fill-opacity="0.42"/>
+</svg>

app/javascript/dashboard/routes/auth/testimonialsConstants.js

@@ -0,0 +1,16 @@
+export default {
+  LEFT_CARD: {
+    AUTHOR_NAME: 'Jaime Rivas',
+    AUTHOR_COMAPNY: 'CEO Synergy Inc.',
+    AUTHOR_IMAGE: 'https://www.chatwoot.com/testimonials/jaime-rivas.jpeg',
+    AUTHOR_REVIEW:
+      'Chatwoot has worked very well for our use case. The new features are just added advantages; it was working for us perfectly from the first version itself. It always solves the problem for us perfectly. No complaints.',
+  },
+  RIGHT_CARD: {
+    AUTHOR_NAME: 'Andrey Novikov',
+    AUTHOR_COMAPNY: 'Marketing VideoTouch',
+    AUTHOR_IMAGE: 'https://www.chatwoot.com/testimonials/andrey-novikov.jpg',
+    AUTHOR_REVIEW:
+      "Chatwoot is great! Using them for our startup VideoTouch and I'm very satisfied! Great open source alternative of Intercom, Crisp, and other expensive chats for websites. 😎",
+  },
+};

app/javascript/dashboard/routes/login/Login.vue

@@ -1,54 +1,51 @@
 <template>
-  <div class="medium-12 column login">
+  <div class="row auth-screen--view align-center">
-    <div class="text-center medium-12 login__hero align-self-top">
+    <div class="login-form--wrap flex-divided-view">
-      <img
+      <div class="form--wrap w-full">
-        :src="globalConfig.logo"
+        <auth-header
-        :alt="globalConfig.installationName"
+          :title="
-        class="hero__logo"
+            useInstallationName(
+              $t('LOGIN.TITLE'),
+              globalConfig.installationName
+            )
+          "
+          :sub-title="$t('LOGIN.DESCRIPTION')"
         />
-      <h2 class="hero__title">
+        <div v-if="!email" class="w-full">
-        {{
+          <form class="" @submit.prevent="login()">
-          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+            <div>
-        }}
+              <auth-input
-      </h2>
-    </div>
-    <div class="row align-center">
-      <div v-if="!email" class="small-12 medium-4 column">
-        <form class="login-box column align-self-top" @submit.prevent="login()">
-          <div class="column log-in-form">
-            <label :class="{ error: $v.credentials.email.$error }">
-              {{ $t('LOGIN.EMAIL.LABEL') }}
-              <input
                 v-model.trim="credentials.email"
-                type="text"
+                :class="{ error: $v.credentials.email.$error }"
-                data-testid="email_input"
+                :label="$t('LOGIN.EMAIL.LABEL')"
+                icon-name="mail"
+                type="email"
                 :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-                @input="$v.credentials.email.$touch"
+                @blur="$v.credentials.email.$touch"
               />
-            </label>
+              <auth-input
-            <label :class="{ error: $v.credentials.password.$error }">
-              {{ $t('LOGIN.PASSWORD.LABEL') }}
-              <input
                 v-model.trim="credentials.password"
+                :class="{ error: $v.credentials.password.$error }"
+                :label="$t('LOGIN.PASSWORD.LABEL')"
+                icon-name="lock-closed"
                 type="password"
-                data-testid="password_input"
                 :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-                @input="$v.credentials.password.$touch"
+                @blur="$v.credentials.password.$touch"
               />
-            </label>
+            </div>
-            <woot-submit-button
+            <auth-submit-button
-              :disabled="
+              :label="$t('LOGIN.SUBMIT')"
+              :is-disabled="
                 $v.credentials.email.$invalid ||
                   $v.credentials.password.$invalid ||
                   loginApi.showLoading
               "
-              :button-text="$t('LOGIN.SUBMIT')"
+              :is-loading="loginApi.showLoading"
-              :loading="loginApi.showLoading"
+              icon="arrow-chevron-right"
-              button-class="large expanded"
+              @click="login()"
             />
-          </div>
           </form>
-        <div class="column text-center sigin__footer">
+          <div class="column text-center auth-screen--footer">
             <p v-if="!globalConfig.disableUserProfileUpdate">
               <router-link to="auth/reset/password">
                 {{ $t('LOGIN.FORGOT_PASSWORD') }}
@@ -64,17 +61,25 @@
         <woot-spinner v-else size="" />
       </div>
     </div>
+    <auth-right-screen />
+  </div>
 </template>
 
 <script>
 import { required, email } from 'vuelidate/lib/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WootSubmitButton from '../../components/buttons/FormSubmitButton';
 import { mapGetters } from 'vuex';
+import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
+import AuthRightScreen from 'dashboard/routes/auth/components/AuthRightScreen';
+import AuthInput from 'dashboard/routes/auth/components/AuthInput';
+import AuthSubmitButton from 'dashboard/routes/auth/components/AuthSubmitButton';
 
 export default {
   components: {
-    WootSubmitButton,
+    AuthHeader,
+    AuthRightScreen,
+    AuthInput,
+    AuthSubmitButton,
   },
   mixins: [globalConfigMixin],
   props: {
@@ -172,3 +177,15 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.login-form--wrap {
+  flex-direction: column;
+  margin: var(--space-medium) 0;
+}
+
+@media screen and (max-width: 1200px) {
+  .login-form--wrap {
+    margin: var(--space-larger) 0;
+  }
+}
+</style>

app/javascript/shared/assets/stylesheets/shadows.scss

@@ -16,4 +16,5 @@
     --shadow-context-menu: rgb(22 23 24 / 35%) 0px 10px 38px -10px,
     rgb(22 23 24 / 20%) 0px 10px 20px -15px;
     --shadow-widget-builder: 0 0px 20px 5px rgb(0 0 0 / 10%);
+    --shadow-auth-page-card: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -94,6 +94,7 @@
   "list-outline": "M2.75 18h12.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.494L2.75 18h12.5-12.5Zm0-6.5h18.5a.75.75 0 0 1 .102 1.493L21.25 13H2.75a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm0-6.497h15.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.493l.102-.007h15.5-15.5Z",
   "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
   "lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
+  "lock-shield-outline": "M10 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 18 10.25V11c-.319 0-.637.11-.896.329l-.107.1c-.164.17-.33.323-.496.457L16.5 10.25a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h9.888a6.024 6.024 0 0 0 1.54 1.5H4.25A2.25 2.25 0 0 1 2 19.75v-9.5A2.25 2.25 0 0 1 4.25 8H6V6a4 4 0 0 1 4-4Zm8.284 10.122c.992 1.036 2.091 1.545 3.316 1.545.193 0 .355.143.392.332l.008.084v2.501c0 2.682-1.313 4.506-3.873 5.395a.385.385 0 0 1-.253 0c-2.476-.86-3.785-2.592-3.87-5.13L14 16.585v-2.5c0-.23.18-.417.4-.417 1.223 0 2.323-.51 3.318-1.545a.389.389 0 0 1 .566 0ZM10 13.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 7.5 6v2h5V6A2.5 2.5 0 0 0 10 3.5Z",
   "mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
   "mail-unread-outline": "M16 6.5H5.25a1.75 1.75 0 0 0-1.744 1.606l-.004.1L11 12.153l6.03-3.174a3.489 3.489 0 0 0 2.97.985v6.786a3.25 3.25 0 0 1-3.066 3.245L16.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-8.5a3.25 3.25 0 0 1 3.066-3.245L5.25 5h11.087A3.487 3.487 0 0 0 16 6.5Zm2.5 3.399-7.15 3.765a.75.75 0 0 1-.603.042l-.096-.042L3.5 9.9v6.85a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.899ZM19.5 4a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z",
   "mail-outline": "M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
@@ -120,6 +121,7 @@
   "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
   "person-assign-outline": "M11.313 15.5a6.471 6.471 0 0 1 .709-1.5h-7.77a2.249 2.249 0 0 0-2.249 2.25v.577c0 .892.319 1.756.899 2.435c1.566 1.834 3.952 2.74 7.098 2.74c.931 0 1.796-.08 2.592-.24a6.51 6.51 0 0 1-.913-1.366c-.524.07-1.083.105-1.68.105c-2.737 0-4.703-.745-5.957-2.213a2.25 2.25 0 0 1-.539-1.461v-.578a.75.75 0 0 1 .75-.749h7.06ZM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7ZM23 17.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0Zm-4.647-2.853a.5.5 0 0 0-.707.707L19.293 17H15a.5.5 0 1 0 0 1h4.293l-1.647 1.647a.5.5 0 0 0 .707.707l2.5-2.5a.497.497 0 0 0 .147-.345V17.5a.498.498 0 0 0-.15-.357l-2.497-2.496Z",
   "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
+  "person-account-outline": "M11 15c0-.35.06-.687.17-1H4.253a2.249 2.249 0 0 0-2.249 2.249v.578c0 .892.319 1.756.899 2.435 1.566 1.834 3.952 2.74 7.098 2.74.397 0 .783-.015 1.156-.044A2.998 2.998 0 0 1 11 21v-.535c-.321.024-.655.036-1 .036-2.738 0-4.704-.746-5.958-2.213a2.25 2.25 0 0 1-.539-1.462v-.577c0-.414.336-.75.75-.75H11V15ZM10 2.005a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM12 15a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-6Zm2.5 1a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Z",
   "play-circle-outline": "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12Zm8.856-3.845A1.25 1.25 0 0 0 9 9.248v5.504a1.25 1.25 0 0 0 1.856 1.093l5.757-3.189a.75.75 0 0 0 0-1.312l-5.757-3.189Z",
   "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
   "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",