Improving styling

jordus100 · May 23, 2024 · cc09af9 · cc09af9
1 parent 1b7acae
commit cc09af9
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 31 deletions.
diff --git a/src/utils/photo-picker/PhotoPicker.js b/src/utils/photo-picker/PhotoPicker.js
@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
 export default function PhotoPicker({triggerButton, onSelect}){
     const [imageBuffor, setImageBuffor] = useState('');
     const config = {
-        borderRadius: '5px',
+        borderRadius: '10px',
         aspectRatio: 1,
         language: 'en',
         width: '300px',
@@ -27,7 +27,14 @@ export default function PhotoPicker({triggerButton, onSelect}){
                     <div className='user-setting-popup-window-background'>
                         <div className='photo-picker-popup-window'>
                             <div className='photo-picker-popup-container'>
-                                <button className='photo-picker-popup-close-btn' onClick={close}>&times;</button>
+                                <div className='close-button'>
+                                    <div class="close-container"
+                                            onClick={close}>
+                                        <div class="leftright"></div>
+                                        <div class="rightleft"></div>
+                                        <label class="close">close</label>
+                                    </div>
+                                </div>
                                 <div className='photo-picker-component'>
                                     < ReactImagePickerEditor                
                                         config={config}

diff --git a/src/utils/photo-picker/PhotoPicker.scss b/src/utils/photo-picker/PhotoPicker.scss
@@ -1,45 +1,116 @@
-.photo-picker-popup-window {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(500px, 95%);
-    height: fit-content;
-    padding: 20px;
-    border-radius: 10px;
-    background-color: #6a6a6a;
-}
-
 .user-setting-popup-window-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-}
 
-.photo-picker-popup-container {
-    display: flex;
-    flex-direction: column;
-}
+    .photo-picker-popup-window {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: min(500px, 95%);
+        height: fit-content;
+        padding: 20px;
+        border-radius: 10px;
+        background-color: #1a1a1a;
+
+        .photo-picker-popup-container {
+            display: flex;
+            flex-direction: column;
+
+            .close-button {
+                $softorange: #10510d;
+                $tomatored: #F25C66;
+
+                .close-container{
+                    position: relative;
+                    margin-left: auto;
+                    width: 50px;
+                    cursor: pointer;
+                }
+
+                .leftright{
+                    height: 4px;
+                    width: 50px;
+                    position: absolute;
+                    margin-top: 24px;
+                    background-color: $softorange;
+                    border-radius: 2px;
+                    transform: rotate(45deg);
+                    transition: all .3s ease-in;
+                    }
 
-.photo-picker-popup-operation-btns {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+                .rightleft{
+                    height: 4px;
+                    width: 50px;
+                    position: absolute;
+                    margin-top: 24px;
+                    background-color: $softorange;
+                    border-radius: 2px;
+                    transform: rotate(-45deg);
+                    transition: all .3s ease-in;
+                }
+
+                label{
+                    color: white;
+                    font-family: Helvetica, Arial, sans-serif; 
+                    font-size: 10px;
+                    text-transform: uppercase;
+                    letter-spacing: 2px;
+                    transition: all .3s ease-in;
+                    opacity: 0;
+                }
+
+                .close{
+                    margin: 50px 0 0 5px;
+                    position: absolute;
+                }
+
+                .close-container:hover .leftright{
+                    transform: rotate(-45deg);
+                    background-color: $tomatored;
+                }
+
+                .close-container:hover .rightleft{
+                    transform: rotate(45deg);
+                    background-color: $tomatored;
+                }
+
+                .close-container:hover label{
+                    opacity: 1;
+                }
+            }
+
+            .photo-picker-component {
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .photo-picker-popup-operation-btns {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+
+                button {
+                    border: none;
+                    margin-top: 20px;
+                    transition: all 0.3s ease;
+                    &:hover {
+                        cursor: pointer;
+                        text-shadow: #188e12 0px 0px 10px;
+                    } 
+                }
+            }
+        }        
+    }
 }
 
 .photo-picker-popup-arrow {
     visibility: hidden;
 }
 
-.photo-picker-popup-close-btn {
-    width: 50px;
-    margin-left: auto;
-    border-radius: 50%;
-}
-
-.photo-picker-component {
-    margin-left: auto;
-    margin-right: auto;
+.place-image {
+    filter: invert(80%);
 }