From 436bce7a2c926f905131f7472da799e9f70325bc Mon Sep 17 00:00:00 2001
From: Ahmed Maghrabi <ahmedhisham12351@gmail.com>
Date: Sun, 14 May 2023 07:45:00 +0300
Subject: [PATCH] improving Drawer ui + main page header icons style

---
 frontend/src/components/frame/Frame.jsx          |  1 +
 .../query_builder/BuilderContainer.jsx           |  5 ++++-
 .../query_builder/BuilderContainer.scss          | 16 +++++++++++++---
 .../query_builder/BuilderSelection.jsx           |  1 +
 frontend/src/icons/IconPlay.jsx                  |  2 +-
 frontend/src/static/style.css                    |  6 +++++-
 6 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/frame/Frame.jsx b/frontend/src/components/frame/Frame.jsx
index a2ef1b1c..dd34afb2 100644
--- a/frontend/src/components/frame/Frame.jsx
+++ b/frontend/src/components/frame/Frame.jsx
@@ -85,6 +85,7 @@ const Frame = ({
             onClick={() => dispatch(setCommand(reqString))}
             style={{
               cursor: 'pointer',
+              marginLeft: '5px',
             }}
           />
         </div>
diff --git a/frontend/src/components/query_builder/BuilderContainer.jsx b/frontend/src/components/query_builder/BuilderContainer.jsx
index 3a95e66f..dbfdb832 100644
--- a/frontend/src/components/query_builder/BuilderContainer.jsx
+++ b/frontend/src/components/query_builder/BuilderContainer.jsx
@@ -50,6 +50,9 @@ const BuilderContainer = ({ open, setOpen, finder }) => {
       open={open}
       onClose={() => setOpen(!open)}
       placement="left"
+      headerStyle={{
+        backgroundColor: '#F9fafa',
+      }}
     >
       <Select
         id="graph-selection"
@@ -80,7 +83,7 @@ const BuilderContainer = ({ open, setOpen, finder }) => {
         />
       </div>
       <div id="submit-builder">
-        <Button size="sm" onClick={handleSubmit}>Submit</Button>
+        <Button id="btn-submit-builder" size="sm" onClick={handleSubmit}>Submit</Button>
       </div>
 
     </Drawer>
diff --git a/frontend/src/components/query_builder/BuilderContainer.scss b/frontend/src/components/query_builder/BuilderContainer.scss
index 3b4207b2..72fdcaf8 100644
--- a/frontend/src/components/query_builder/BuilderContainer.scss
+++ b/frontend/src/components/query_builder/BuilderContainer.scss
@@ -5,12 +5,22 @@
 
 .selection-builder{
     display: block;
-
 }
 
 #submit-builder{
     width: 100%;
     display: flex;
-    justify-content: right;
-    padding-top: 10px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12px;
+}
+
+#btn-submit-builder:hover {
+    border-color: #007bff;
+}
+
+#btn-submit-builder {
+    width: 100%;
+    font-weight: Bold;
+    border: 1px solid #2A2A2A;
 }
\ No newline at end of file
diff --git a/frontend/src/components/query_builder/BuilderSelection.jsx b/frontend/src/components/query_builder/BuilderSelection.jsx
index 99274a78..7f4ef17c 100644
--- a/frontend/src/components/query_builder/BuilderSelection.jsx
+++ b/frontend/src/components/query_builder/BuilderSelection.jsx
@@ -16,6 +16,7 @@ const BuilderSelection = ({ finder, setQuery, currentWord }) => {
       (element) => (
         <ListGroup.Item key={uuid()}>
           <Button
+            style={{ fontSize: '13px', minWidth: '90px' }}
             size="small"
             onClick={handleClick}
             data-val={element}
diff --git a/frontend/src/icons/IconPlay.jsx b/frontend/src/icons/IconPlay.jsx
index a1b09cb6..a3cb1c13 100644
--- a/frontend/src/icons/IconPlay.jsx
+++ b/frontend/src/icons/IconPlay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const IconPlay = (props) => (
   // eslint-disable-next-line react/jsx-props-no-spreading
-  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32" {...props}>
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32" {...props}>
     <path d="M29.152 13.92c-0.352-0.576-0.864-1.056-1.376-1.408l-18.944-11.936c-1.248-0.736-2.816-0.768-4.128-0.032-1.28 0.736-2.080 2.080-2.080 3.552v23.776c0 1.472 0.8 2.848 2.080 3.616 0.608 0.352 1.312 0.512 2.016 0.512 0.032 0 0.032 0 0.032 0 0.736 0 1.44-0.16 2.144-0.576l18.816-11.872c1.952-1.184 2.592-3.68 1.44-5.632zM21.12 16.032l-12 7.584v-15.2l12 7.616z" />
   </svg>
 );
diff --git a/frontend/src/static/style.css b/frontend/src/static/style.css
index 62a8f43d..c546ee91 100644
--- a/frontend/src/static/style.css
+++ b/frontend/src/static/style.css
@@ -247,7 +247,7 @@ a[data-toggle="collapse"] {
 }
 
 .input-style{
-    width: 97% !important;
+    width: 100% !important;
 }
 
 /* code mirror style bug fix code */
@@ -419,6 +419,10 @@ a[data-toggle="collapse"] {
 
 .btn-link {
     color: #c4c4c4 !important;
+    font-size: 13.5px;
+    /* background-color: red; */
+    padding-right: 10px;
+    padding-left: 10px;
 }
 .btn-link:hover {
     color: #2756FF !important;