fullscreen button icon

src/assets/fullscreen.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9945 9.85075C27.9182 8.81596 27.0549 8 26 8H19L18.8834 8.00673C18.386 8.06449 18 8.48716 18 9C18 9.55228 18.4477 10 19 10H26V17L26.0067 17.1166C26.0645 17.614 26.4872 18 27 18C27.5523 18 28 17.5523 28 17V10L27.9945 9.85075ZM9.99327 18.8834C9.93551 18.386 9.51284 18 9 18C8.44772 18 8 18.4477 8 19V26L8.00548 26.1493C8.08179 27.184 8.94514 28 10 28H17L17.1166 27.9933C17.614 27.9355 18 27.5128 18 27C18 26.4477 17.5523 26 17 26H10V19L9.99327 18.8834Z" fill="#093003"/>
+</svg>

src/pages/main.tsx

@@ -3,6 +3,7 @@ import { getFeatures } from '@ijl/cli';
 
 import logo from '../assets/logo.svg';
 import arrow from '../assets/36-arrow-right.svg';
+import fullScreen from '../assets/fullscreen.svg';
 
 import { Keyboard } from '../components/keyboard';
 
@@ -233,7 +234,11 @@ export const MainPage = () => {
 
     return (
         <MainWrapper>
-            {fullScreenFeature && !isFull && <FullScreenButton onClick={handleFullScreen}>На весь экран</FullScreenButton>}
+            {fullScreenFeature && !isFull && (
+                <FullScreenButton onClick={handleFullScreen}>
+                    <img src={fullScreen} />
+                </FullScreenButton>
+            )}
             <LogoImg src={logo} />
             {/* <Start /> */}
             {!showStart && <Input onStart={() => setShowStart(true)} />}

src/pages/style.ts

@@ -282,10 +282,12 @@ export const Circle = styled.circle<{ circumference: number; percent: number }>`
 `;
 
 export const FullScreenButton = styled.button`
-    padding: 24px;
+    padding: 12px;
     position: absolute;
     top: 50px;
     right: 50px;
+    border: none;
+    background-color: rgba(0, 0, 0, .07);
 `;
 
 export const InputHolder = styled.div`