Created the QRCode styles.sass

client/src/pages/tools/general/QRCode/styles.sass

@@ -0,0 +1,83 @@
+@import "@/common/styles/colors"
+
+.qr-code
+  width: 100%
+  border: 2px solid $dark-gray
+  border-radius: 1.5rem
+  padding: 1.5rem 2rem
+
+.qr-code .tabs
+  display: flex
+  gap: 1rem
+  overflow-x: scroll
+
+.qr-code .tab
+  font-size: 28pt
+  color: $darker-white
+  margin: 0
+  cursor: pointer
+  user-select: none
+
+  &:hover
+    color: $primary
+
+.qr-code .tab-selected
+  border-bottom: 3px solid $primary
+  border-radius: 2px
+  color: $white
+
+.qr-editor
+  display: flex
+  padding-top: 2rem
+  justify-content: space-between
+  overflow: hidden
+  gap: 3rem
+
+.qr-input
+  width: 100%
+
+.qr-area
+  background-color: $background
+  color: $darker-white
+  border-radius: 1rem
+  padding: 1rem
+  resize: none
+  width: 100%
+  height: 100%
+  box-sizing: border-box
+  font-size: 16pt
+
+.qr-group
+  display: flex
+  gap: 1rem
+  align-items: center
+  justify-content: space-between
+  flex-wrap: wrap
+  margin-bottom: 1rem
+
+  h2
+    color: $white
+    margin: 0
+
+.qr-input-field
+  background-color: $background
+  color: $darker-white
+  border: 2px solid $dark-gray
+  border-radius: 1rem
+  padding: 1rem
+  box-sizing: border-box
+  font-size: 16pt
+
+.qr-result
+  border: 0.5rem solid $white
+  border-radius: 1rem
+
+@media screen and (max-width: 1024px)
+  .qr-code .tab
+    font-size: 20pt
+  .qr-editor
+    flex-direction: column
+    gap: 1rem
+    align-items: center
+  .qr-input-field
+    width: 100%