design edits

Author: zahidayturan

rsa-frontend/public/icon/bin.png

@@ -1,26 +1,52 @@
 import React from 'react';
 
-const FileExplorer = () => {
+const FileContainer = ({ owner, fileName, size, id }) => (
+ <div className={"file-container custom-row"} style={{justifyContent:"space-between",alignItems:"center"}}>
+ <div>
+ <p className={"font-bold"}>{owner}</p>
+ <p>{fileName}</p>
+ <p className={"x-small-text"}>{size}</p>
+ </div>
+ <div className={"custom-row"} style={{gap:8}}>
+ <div className={"icon-box"} style={{backgroundColor:"var(--orange-color-1)"}}>
+ <img src="/icon/bin.png" alt="Remove File" className={"mini-icon"}/>
+ </div>
+ <div className={"icon-box"} style={{backgroundColor:"var(--yellow-color-1)"}}>
+ <img src="/icon/file.png" alt="Open File" className={"mini-icon"}/>
+ </div>
+ </div>
+ </div>
+);
 
+const FileExplorer = () => {
 
  return (
  <div className="file-explorer">
  <p className={"title-text"}><span>Dosya</span> Gezgini</p>
+
  <div className={"custom-row"}>
  <img src="/icon/public.png" alt="" className={"mid-icon"}/>
  <div>
- <p style={{color:"var(--orange-color-1)"}}>Geçerli <span>Açık Anahtar</span></p>
+ <p style={{color: "var(--orange-color-1)"}}>Geçerli <span>Açık Anahtar</span></p>
  <p className={"small-text"}>Anahtar Bekleniyor</p>
  </div>
  </div>
+
  <div className={"custom-row"}>
  <img src="/icon/private.png" alt="" className={"mid-icon"}/>
  <div>
- <p style={{color:"var(--yellow-color-1)"}}>Geçerli <span>Kapalı Anahtar</span></p>
+ <p style={{color: "var(--yellow-color-1)"}}>Geçerli <span>Kapalı Anahtar</span></p>
  <p className={"small-text"}>Anahtar Bekleniyor</p>
  </div>
  </div>
 
+ <FileContainer owner="Alice" fileName="abc.txt" size="148 kb" id="1" />
+
+ <div className={"remove-button"}>
+ <img src="/icon/bin.png" alt="Clear System" className={"mini-icon"}/>
+ <p className={"small-text"}>Sistemi Temizle</p>
+ </div>
+
  </div>
  );
 };

rsa-frontend/public/icon/file.png

@@ -5,6 +5,7 @@
  --orange-color-1: rgb(254,129,45);
  --green-color-1: rgb(3,166,74);
  --yellow-color-1: rgb(255,201,40);
+ --red-color-1: rgb(230,38,38);
  --grey-color-1: rgb(231,231,231);
  --background-color: rgb(245, 245, 245);
  --secondary-color-1: rgb(245,245,245);
@@ -119,11 +120,24 @@ span{
  height: 22px;
 }
 
+.icon-box{
+ border-radius: 100%;
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
 .scenarios{
  display: flex;
  flex-direction: column;
  gap: 12px;
-
+ background-color: var(--primary-color-1);
+ width: max-content;
+ border-radius: 12px;
+ padding: 12px;
 }
 
 .scenario-button {
@@ -150,7 +164,6 @@ span{
 
 .scenario-button:hover{
  padding: 0 28px;
- box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
 }
 
 
@@ -185,7 +198,7 @@ span{
  color: var(--secondary-color-1);
 }
 
-.user-button:hover{
+.user-button:hover ,.scenario-button:hover ,.remove-button:hover{
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
 }
 
@@ -204,3 +217,28 @@ span{
 .file-explorer p{
  color: var(--secondary-color-1);
 }
+
+.remove-button{
+ width: max-content;
+ display: flex;
+ gap: 6px;
+ border-radius: 6px;
+ padding: 6px;
+ background-color: var(--red-color-1);
+ cursor: pointer;
+ align-self: end;
+}
+
+.remove-button:hover{
+ padding: 6px 8px;
+}
+
+.file-container{
+ padding: 8px;
+ border-radius: 8px;
+ background-color: var(--grey-color-1);
+}
+
+.file-container p{
+ color: var(--black-color-1);
+}

rsa-frontend/src/routes/components/FileExplorer.js

@@ -8,4 +8,12 @@
 
 .small-text{
  font-size: 14px;
+}
+
+.x-small-text{
+ font-size: 12px;
+}
+
+.font-bold{
+ font-weight: bold;
 }