From 24713f27070491a165aaf69da4afbcfead4ced68 Mon Sep 17 00:00:00 2001
From: Keith Chong <kykchong@redhat.com>
Date: Thu, 31 Oct 2024 18:05:19 -0400
Subject: [PATCH] Pull out styles changes; Make arrows more pronounced

Signed-off-by: Keith Chong <kykchong@redhat.com>
---
 ...application-deployment-history-details.tsx | 42 ++++++-------------
 .../application-deployment-history.scss       | 24 +++++++++++
 .../application-parameters.tsx                |  4 +-
 .../editable-panel/editable-panel.scss        |  6 +++
 4 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx b/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx
index dbd78306f1f54..7602a8fb2aa0a 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx
@@ -26,7 +26,6 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
 
     const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
     const [showSourceDetails, setShowSourceDetails] = React.useState([]);
-    const singleSourceTopMargin: string = '20px';
     const updateMap = (i: number) => {
         if (i === null || i === undefined) {
             return;
@@ -38,19 +37,18 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
         }
     };
 
-    const getCollapsedSection = (i: number, repoURL: string, topMargin: string): React.ReactFragment => {
+    const getCollapsedSection = (i: number, repoURL: string): React.ReactFragment => {
         return (
             <div
                 id={i ? `'hide-parameters-'${i}` : 'hide-parameters'}
-                key={i ? `'hide-parameters-'${i}` : 'hide-parameters'}
-                className='settings-overview__redirect-panel'
-                style={{marginTop: topMargin, border: '1px solid rgba(0, 0, 0, 0.1)'}}
+                key={i ? `'hide-parameters-'${i}` : 'hide-parameters2'}
+                className='settings-overview__redirect-panel collapsed-section'
                 onClick={() => {
                     setShowParameterDetails(!showParameterDetails);
                     updateMap(i);
                 }}>
                 <div className='editable-panel__collapsible-button'>
-                    <i className={`fa fa-angle-down filter__collapse`} />
+                    <i className={`fa fa-angle-down filter__collapse editable-panel__collapsible-button__override`} />
                 </div>
 
                 <div style={{textAlign: 'center'}}>
@@ -66,7 +64,7 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
             <React.Fragment>
                 <div id={index ? `'show-parameters-'${index}` : 'show-parameters'} className='editable-panel__collapsible-button' style={{zIndex: 1001}}>
                     <i
-                        className={`fa fa-angle-up filter__collapse`}
+                        className={`fa fa-angle-up filter__collapse editable-panel__collapsible-button__override`}
                         onClick={() => {
                             setShowParameterDetails(!showParameterDetails);
                             updateMap(index);
@@ -109,15 +107,8 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
                         <div
                             id={`'history-expanded'`}
                             key={`'history-expanded'`}
-                            className={classNames('white-box')}
-                            style={{
-                                marginTop: singleSourceTopMargin,
-                                padding: '20px',
-                                border: '2px solid rgba(0, 0, 0, 0.1)',
-                                boxShadow: '1px 2px 3px rgba(0, 0, 0, 0.1)',
-                                borderRadius: '4px'
-                            }}>
-                            {getExpandedSection(null)}
+                            className={classNames('white-box','expanded-section')}>
+                            {getExpandedSection()}
                             <DataLoader
                                 errorRenderer={err => {
                                     return getErrorSection(err);
@@ -138,7 +129,7 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
                             </DataLoader>
                         </div>
                     ) : (
-                        getCollapsedSection(null, recentDeployments[index].source.repoURL, singleSourceTopMargin)
+                        getCollapsedSection(null, recentDeployments[index].source.repoURL)
                     )}
                 </React.Fragment>
             ) : (
@@ -170,14 +161,7 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
                             <div
                                 id={`'history-expanded-'${i}`}
                                 key={`'history-expanded-'${i}`}
-                                className={classNames('white-box')}
-                                style={{
-                                    marginTop: '20px',
-                                    padding: '0px',
-                                    border: '2px solid rgba(0, 0, 0, 0.1)',
-                                    boxShadow: '1px 2px 3px rgba(0, 0, 0, 0.1)',
-                                    borderRadius: '4px'
-                                }}>
+                                className={classNames('white-box','expanded-section')}>
                                 <div id={`'history-expanded-'${i}`} key={`'history-expanded-'${i}`} className='white-box__details' style={{marginBottom: '0px'}}>
                                     {getExpandedSection(i)}
                                     <DataLoader
@@ -194,10 +178,8 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
                                         load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
                                         {(details: models.RepoAppDetails) => (
                                             <React.Fragment>
-                                                <div
-                                                    id={'floating_title_' + i}
-                                                    className='editable-panel__sticky-title'>
-                                                    <div style={{marginTop: '20px'}}>
+                                                <div id={'floating_title_' + i} className='editable-panel__sticky-title'>
+                                                    <div style={{marginTop: '0px'}}>
                                                         <div>Source {i + 1} Parameters</div>
                                                         <div>Repo URL: {source.repoURL}</div>
                                                         <div>{source.path ? 'Path: ' + source.path : ''}</div>
@@ -219,7 +201,7 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
                                 </div>
                             </div>
                         ) : (
-                            getCollapsedSection(i, source.repoURL, '20px')
+                            getCollapsedSection(i, source.repoURL)
                         )}
                     </React.Fragment>
                 ))
diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
index ac8121ac5a444..65f19a0c23497 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
@@ -46,6 +46,30 @@
         margin-left: -1em;
     }
 
+    .collapsed-section {
+        margin-top: 20px;
+        padding: 20px;
+        border: 1px solid;
+        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
+        border-radius: '4px';
+        @include themify($themes) {
+            border-color: themed('border');
+            box-shadow: themed('shadow');
+        }
+    }
+
+    .expanded-section {
+        margin-top: 20px;
+        padding: 20px;
+        border: 2px solid;
+        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
+        border-radius: '4px';
+        @include themify($themes) {
+            border-color: themed('border');
+            box-shadow: themed('shadow');
+        }
+    }
+
     .separator {
         height: 2px;
         margin: 1em 0;
diff --git a/ui/src/app/applications/components/application-parameters/application-parameters.tsx b/ui/src/app/applications/components/application-parameters/application-parameters.tsx
index 041880f007928..3771d32d3cf1a 100644
--- a/ui/src/app/applications/components/application-parameters/application-parameters.tsx
+++ b/ui/src/app/applications/components/application-parameters/application-parameters.tsx
@@ -304,7 +304,7 @@ export const ApplicationParameters = (props: {
                     props.handleCollapse(index, !currentState);
                 }}>
                 <div className='editable-panel__collapsible-button'>
-                    <i className={`fa fa-angle-down filter__collapse`} />
+                    <i className={`fa fa-angle-down filter__collapse editable-panel__collapsible-button__override`} />
                 </div>
                 <div className='settings-overview__redirect-panel__content'>
                     <div className='settings-overview__redirect-panel__title'>Source {index + 1 + ': ' + appSource.repoURL}</div>
@@ -320,7 +320,7 @@ export const ApplicationParameters = (props: {
                         <React.Fragment>
                             <div className='editable-panel__collapsible-button'>
                                 <i
-                                    className={`fa fa-angle-up filter__collapse`}
+                                    className={`fa fa-angle-up filter__collapse editable-panel__collapsible-button__override`}
                                     onClick={() => {
                                         props.handleCollapse(index, !props.collapsedSources[index]);
                                     }}
diff --git a/ui/src/app/shared/components/editable-panel/editable-panel.scss b/ui/src/app/shared/components/editable-panel/editable-panel.scss
index 7a4fee7d997a3..7ad9ae28014f9 100644
--- a/ui/src/app/shared/components/editable-panel/editable-panel.scss
+++ b/ui/src/app/shared/components/editable-panel/editable-panel.scss
@@ -1,4 +1,5 @@
 @import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .editable-panel {
     position: relative;
@@ -32,6 +33,11 @@
         position: absolute;
         top: 30px;
         right: 30px;
+        &__override {
+            @include themify($themes) {
+                color: themed('light-argo-teal-7');
+            }
+        }
     }
 
     &__sticky-title {