Relocated component styling

src/App.css

@@ -11,9 +11,4 @@ html, body, #root {
 div { box-sizing: border-box; }
 
 .d-none { display: none; visibility: hidden;}
-.d-flex { display: flex; }
-.d-block { display: flex; }
-.flex-column { flex-direction: column; }
-.flex-row { flex-direction: row; }
-.align-items-center { align-items: center; }
-.justify-center { justify-content: center; }
+.d-block { display: flex; }

src/App.jsx

@@ -1,11 +1,9 @@
 import './App.css'
-import VirtualKeyBoard from './Components/virtualKeyBoard'
+import VirtualKeyBoard from './Components/VirtualKeyboard/VirtualKeyboard';
 
 function App() {
   return (
-    <>
       <VirtualKeyBoard/>
-    </>
   )
 }
 

src/Components/EmojiKeyBoard.jsx → src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx

@@ -1,4 +1,4 @@
-import { useEmojiData } from "../hooks/useEmojiData";
+import { useEmojiData } from "../../hooks/useEmojiData";
 
 function EmojiKeyBoard({ handleInputButtonClick }) {
     const emojiCategories = useEmojiData();

src/Components/KeyBoard/KeyBoard.css

@@ -0,0 +1,9 @@
+#vk-board {
+    background-color: var(--vk-color-board);
+    height: var(--vk-max-height);
+    padding: 12px;
+    user-select: none;
+}
+
+.d-flex { display: flex; }
+.justify-center { justify-content: center; }

src/Components/KeyBoard.jsx → src/Components/KeyBoard/KeyBoard.jsx

@@ -1,4 +1,4 @@
-import './KeyBoardStylee.css';
+import './KeyBoard.css';
 
 function KeyBoard(props) {
   return (

src/Components/KeyBoardLanguage/KeyBoardLanguage.css

@@ -0,0 +1,37 @@
+.language-and-icons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    white-space: nowrap;
+}
+
+.chooseLanguage {
+    background-color: rgb(255, 255, 255);
+    border: none;
+    color: rgb(3, 3, 3);
+    height: 30px;
+    direction: ltr;
+    font-weight: bold;
+    font-size: 16px;
+    margin: 16px;
+    word-wrap: normal;
+}
+
+.icon img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .icon {
+    background-color: var(--vk-color-key);
+    border: 1px solid rgb(180, 180, 180);
+    border-radius: 16px;
+    margin: 12px;
+    padding: 12px;
+    cursor: pointer;
+    transition: .3s;
+  }
+
+  .icon:hover {
+    background-color: var(--vk-color-key-hover);
+  }

src/Components/KeyBoardLanguage.jsx → src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx

@@ -1,9 +1,8 @@
 import { FaKeyboard } from "react-icons/fa";
-import "./KeyBoardStylee.css";
-import languagesData from "../LanguagesData";
-import emojiButton from "../assets/images/emojiButton.webp";
-
+import languagesData from "../../LanguagesData";
+import emojiButton from '../../assets/images/emojiButton.webp';
 import React, { useState } from 'react';
+import './KeyBoardLanguage.css';
 
 function KeyBoardLanguage(props) {
   const setLanguage = props.setLanguage;

src/Components/Screen/Screen.css

@@ -0,0 +1,19 @@
+.DivTextArea {
+    background: rgb(255, 255, 255);
+    cursor: text;
+    display: inline-block;
+    line-height: 1.15;
+    outline: none;
+    padding: 10px 10px 50px;
+    user-select: text;
+    width: 100%;
+    z-index: 3;
+}
+
+.DivTextArea.center {
+    text-align: center;
+}
+
+.DivTextArea.right {
+    text-align: right;
+}

src/Components/Screen.jsx → src/Components/Screen/Screen.jsx

@@ -1,4 +1,4 @@
-import './KeyBoardStylee.css';
+import './Screen.css';
 
 function Screen(props) {
   const text = props.text;

src/Components/SpecialButtons/SpecialButtons.css

@@ -0,0 +1,71 @@
+#spacial_buttons {
+    white-space: nowrap;
+    justify-content: center;
+    right: 5px;
+    bottom: 5px;
+    display: flex;
+    overflow: auto;
+    position: absolute;
+    white-space: nowrap;
+    justify-content: center;
+}
+
+#spacial_buttons button {
+    background-color: var(--vk-color-key);
+    border: 1px solid rgb(180, 180, 180);
+    border-radius: 4px;
+    padding: 12px;
+    cursor: pointer;
+    transition: .3s;
+}
+
+#spacial_buttons button:hover {
+    background-color: var(--vk-color-key-hover);
+}
+
+.modal {
+    font-size: 12px;
+  }
+
+  .modal > .header {
+    background-color: rgb(101, 216, 201);
+    width: 100%;
+    border-bottom: 1px solid gray;
+    font-size: 22px;
+    text-align: center;
+  }
+  .modal > .content {
+    width: 100%;
+    font-size: 18px;
+    padding: 10px 5px;
+  }
+  .modal > .actions {
+    width: 100%;
+    padding: 10px 5px;
+    margin: auto;
+    text-align: center;
+  }
+  .modal > .close {
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    padding: 2px 5px;
+    line-height: 20px;
+    right: -10px;
+    top: -10px;
+    font-size: 24px;
+    background: #ffffff;
+    border-radius: 18px;
+    border: 1px solid #cfcece;
+  }
+
+  .popup-content {
+    padding: 0 !important;
+    max-width: 450px;
+  }
+
+  .modal > .actions button,
+  .modal > .actions input[type="button"] {
+    width: 120px; 
+    height: 40px; 
+  }

src/Components/SpecialButtons.jsx → src/Components/SpecialButtons/SpecialButtons.jsx

@@ -1,16 +1,13 @@
-import React from "react";
 import { FaTrashAlt, FaUndo, FaRedo, FaCopy, FaPaste } from "react-icons/fa";
 import Popup from "reactjs-popup";
 import "reactjs-popup/dist/index.css";
-import "./KeyBoardStylee.css";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-
-import ConvertToPdf from "./ConvertToPdf";
+import ConvertToPdf from "../ConvertToPdf/ConvertToPdf";
 import { Tooltip } from 'react-tooltip';
+import './SpecialButtons.css'
 
-
-function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
+export function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
   const notify = () => {
     toast("Text is copied to clipboard!");
     handleEvent("copy");
@@ -115,6 +112,4 @@ function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
     </div>
 
   );
-}
-
-export default SpecialButtons;
+}

src/Components/StyleSelector/StyleSelector.css

@@ -0,0 +1,26 @@
+.d-flex { display: flex; }
+.flex-column { flex-direction: column; }
+
+.style-selector-container {
+    border-top: 1px solid rgb(180, 180, 180);
+    background-color: var(--vk-color-board);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    margin-bottom: 16px;
+    max-width: var(--vk-max-width);
+    padding: 16px;
+    width: 100%;
+  }
+
+  .align-items-center { align-items: center; }
+  .justify-center { justify-content: center; }
+  .flex-row { flex-direction: row; }
+
+  .row.style-selector {
+    margin-top: 16px;
+  }
+
+  .row.style-selector > * {
+    margin-right: 5px;
+    margin-left: 5px;
+  }

src/Components/StyleSelector.jsx → src/Components/StyleSelector/StyleSelector.jsx

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { FaUnderline } from "react-icons/fa";
-import "./KeyBoardStylee.css";
-import { useStyleSelector } from "../hooks/useStyleSelector";
-
+import { useStyleSelector } from "../../hooks/useStyleSelector";
+import './StyleSelector.css';
 
 const FontOption = styled.option`
   font-family: ${(props) => props.fontFamily};