chore: add lang for button

haxgun · Nov 21, 2023 · 7f1a1ba · 7f1a1ba
1 parent 7fba09d
commit 7f1a1ba
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 42 deletions.
diff --git a/src/components/Highlights.vue b/src/components/Highlights.vue
@@ -1,50 +1,56 @@
 <script setup></script>
 
 <template>
-  <div class="blick1"></div>
-  <div class="blick2"></div>
-  <div class="blick3"></div>
+  <div class="blicks">
+    <div class="blick1"></div>
+    <div class="blick2"></div>
+    <div class="blick3"></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.blick1 {
-  position: fixed;
-  width: 75%;
-  height: 250px;
-  top: 0px;
-  left: 15%;
-  border-radius: 120px 20px;
-  opacity: 0.15;
-  box-shadow: rgb(0, 143, 253) 20px 200px 240px;
-  transform: rotate(-8deg) translateY(-175%) translateZ(0px);
-  transition: box-shadow 0.3s ease 0s;
-}
+.blicks {
+  z-index: -1;
 
-.blick2 {
-  width: 50%;
-  left: auto;
-  right: 10%;
-  border-radius: 20px 120px;
-  opacity: 0.2;
-  transform: rotate(8deg) translateY(-175%) translateZ(0px);
-  box-shadow: rgb(37, 0, 202) 0px 160px 160px;
-  position: fixed;
-  height: 250px;
-  top: 0px;
-  transition: box-shadow 0.3s ease 0s;
-}
+  .blick1 {
+    position: fixed;
+    width: 75%;
+    height: 250px;
+    top: 0px;
+    left: 15%;
+    border-radius: 120px 20px;
+    opacity: 0.15;
+    box-shadow: rgb(0, 143, 253) 20px 200px 240px;
+    transform: rotate(-8deg) translateY(-175%) translateZ(0px);
+    transition: box-shadow 0.3s ease 0s;
+  }
+
+  .blick2 {
+    width: 50%;
+    left: auto;
+    right: 10%;
+    border-radius: 20px 120px;
+    opacity: 0.2;
+    transform: rotate(8deg) translateY(-175%) translateZ(0px);
+    box-shadow: rgb(37, 0, 202) 0px 160px 160px;
+    position: fixed;
+    height: 250px;
+    top: 0px;
+    transition: box-shadow 0.3s ease 0s;
+  }
 
-.blick3 {
-  inset: auto 5% 0px auto;
-  opacity: 0.1;
-  box-shadow: rgb(0, 143, 253) 0px -280px 220px;
-  transform: rotate(-6deg) translateY(200%) translateZ(0px);
-  position: fixed;
-  width: 75%;
-  height: 70%;
-  top: 0px;
-  left: 15%;
-  border-radius: 120px 20px;
-  transition: box-shadow 0.3s ease 0s;
+  .blick3 {
+    inset: auto 5% 0px auto;
+    opacity: 0.1;
+    box-shadow: rgb(0, 143, 253) 0px -280px 220px;
+    transform: rotate(-6deg) translateY(200%) translateZ(0px);
+    position: fixed;
+    width: 75%;
+    height: 70%;
+    top: 0px;
+    left: 15%;
+    border-radius: 120px 20px;
+    transition: box-shadow 0.3s ease 0s;
+  }
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -22,6 +22,7 @@
     "riotId": {
       "title": "Riot ID",
       "description": "Riot ID is your universal identifier that is used in all Riot Games.",
+      "submit": "Submit",
       "random": "Click to substitute an example of Riot ID."
     },
     "customization": {

diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -22,6 +22,7 @@
     "riotId": {
       "title": "Riot ID",
       "description": "Riot ID – ваш универсальный идентификатор, который используется во всех играх Riot Games.",
+      "submit": "Отправить",
       "random": "Нажмите, чтобы подставить пример Riot ID."
     },
     "customization": {

diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Button from '@/components/ui/Button.vue'
 import Input from '@/components/ui/Input.vue'
 import { ref } from 'vue'
 
@@ -26,7 +27,12 @@ const riotId = ref('')
                       {{ $t('editor.riotId.description') }}
                     </p>
                   </div>
-                  <Input v-model="riotId" placeholder="Riot ID" />
+                  <div class="editor__input">
+                    <Input style="flex: 2" v-model="riotId" placeholder="Riot ID" />
+                    <Button class="editor__button">{{
+                      $t('editor.riotId.submit')
+                    }}</Button>
+                  </div>
                   <span @click="riotId = 'MAGICX#1337'" class="random">{{
                     $t('editor.riotId.random')
                   }}</span>
@@ -61,7 +67,7 @@ const riotId = ref('')
 .editor {
   width: 60vw;
   height: fit-content;
-  background: hsl(0, 0%, 8%);
+  background: hsl(0, 0%, 9%);
   border-radius: 8px;
   border: 1px solid hsla(222deg 6% 30% / 0.25);
   overflow: hidden;
@@ -86,6 +92,17 @@ const riotId = ref('')
         flex-direction: column;
         gap: 12px;
 
+        .editor__input {
+          display: flex;
+          gap: 8px;
+
+          .editor__button {
+            border-radius: 5px;
+            padding: 0.7rem 1.1rem;
+            font-size: 0.75rem
+          }
+        }
+
         .editor__settings__header {
           display: flex;
           flex-direction: column;