Merge pull request #1596 from memphisdev/feature-RND-409-minor-ui-cos…

…metics Minor ui cosmetics
superstreamlabs · Jan 2, 2024 · 0dea53f · 0dea53f
2 parents 886225d + 395ee6c
commit 0dea53f
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 18 deletions.
diff --git a/ui_src/src/components/connectorError/index.js b/ui_src/src/components/connectorError/index.js
@@ -72,7 +72,7 @@ const ConnectorError = ({ open, clickOutside, connectorId }) => {
 
     return (
         <Modal
-            header={'Connector Errors'}
+            header={'Connector\'s logs'}
             className={'modal-wrapper produce-modal'}
             width="550px"
             height="50vh"

diff --git a/ui_src/src/components/filter/index.js b/ui_src/src/components/filter/index.js
@@ -476,7 +476,7 @@ const Filter = ({ filterComponent, height, applyFilter, hideElement }) => {
                     colorType="black"
                     radiusType="circle"
                     backgroundColorType="white"
-                    fontSize="14px"
+                    fontSize="12px"
                     fontWeight="bold"
                     boxShadowStyle="float"
                     onClick={() => {}}

diff --git a/ui_src/src/components/select/index.js b/ui_src/src/components/select/index.js
@@ -81,7 +81,7 @@ const SelectComponent = ({
             >
                 {options.map((option) => (
                     <Option key={option?.id || option?.name || option} disabled={option?.disabled || false}>
-                        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} className={option?.name}>
                             <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                                 <img src={option?.icon} alt={option?.name} /> <label>{option?.name || option}</label>
                             </span>

diff --git a/ui_src/src/dark-style.scss b/ui_src/src/dark-style.scss
@@ -258,10 +258,6 @@ html.dark-mode {
     background: #E4E8E6;
   }
 
-  .code-example-details-container .code-generator-container .code-builder .parameters-section, {
-    background: darken(#E6EAE8, 2%);
-  }
-
   .code-builder .ant-collapse-header {
     background: darken(#E6EAE8, 1%);
   }
@@ -308,6 +304,10 @@ html.dark-mode {
     filter: $color-invert-filter !important;
   }
 
+  .right-side .button-container:last-child {
+    filter: initial!important;
+  }
+
   .video-player {
     filter: $color-invert-filter-reverse !important;
   }
@@ -516,13 +516,17 @@ html.dark-mode {
       background: darken(#E6EAE8, 2%);
     }
     label {
-      color: $color-border-medium;
+      color: lighten($color-text-dark, 25%);
     }
     .content label:last-child {
       color: $color-border-medium!important;
     }
   }
 
+  .message-wrapper .message-detail-item .content {
+    color: lighten($color-text-dark, 25%);
+  }
+
   .message-journey-container {
     .canvas-wrapper svg {
       filter: initial!important;
@@ -544,4 +548,12 @@ html.dark-mode {
     }
   }
 
+  .connector-name svg, .connector-options svg, .connector-options-selected svg {
+    filter: initial!important;
+  }
+
+  .ant-select-dropdown .ant-select-item-option-content .Memphis img {
+    filter: $color-invert-filter-reverse!important;
+  }
+
 }
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
@@ -562,7 +562,7 @@ const ProduceConsumList = ({ producer }) => {
                                                             icon={<IoMdInformationCircle />}
                                                         />
                                                         <MenuItem
-                                                            name={'Erros'}
+                                                            name={'Logs'}
                                                             onClick={() => {
                                                                 setOpenConnectorError(true);
                                                                 setOpenConnectorPopover(false);
@@ -662,7 +662,7 @@ const ProduceConsumList = ({ producer }) => {
                                                             icon={<IoMdInformationCircle />}
                                                         />
                                                         <MenuItem
-                                                            name={'Erros'}
+                                                            name={'Logs'}
                                                             onClick={() => {
                                                                 setOpenConnectorError(true);
                                                                 setOpenConnectorPopover(false);

diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js
@@ -205,16 +205,14 @@ const MessageDetails = ({ open, isDls, unselect, isFailedSchemaMessage = false,
                     keysArray &&
                     keysArray.map((item) => (
                         <span key={item} className="content">
-                            <label>{item}</label>
-                            <label className="val">{value[item]}</label>
+                            <label>{item}: <span className="val">{value[item]}</span></label>
                             <Copy data={value[item]} />
                         </span>
                     ))}
                 {details &&
                     value?.map((item) => (
                         <span key={item.name} className="content">
-                            <label>{item.name}</label>
-                            <label className="val">{item.value}</label>
+                            <label>{item.name}: <span className="val">{item.value}</span></label>
                             <Copy data={`${item.name} ${item.value}`} />
                         </span>
                     ))}

diff --git a/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js b/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
@@ -212,7 +212,7 @@ const StationOverviewHeader = ({ refresh }) => {
                         />
                     </div>
                     <div className="created-by">
-                        Created by <b>{stationState?.stationMetaData?.created_by_username}</b> at {stationState?.stationMetaData?.created_at}{' '}
+                        Created by <b>{stationState?.stationMetaData?.created_by_username.startsWith('$') ? 'system' : stationState?.stationMetaData?.created_by_username}</b> at {stationState?.stationMetaData?.created_at}{' '}
                         {!stationState?.stationMetaData?.is_native && '(NATS-Compatible)'}
                         {isCloud() && (
                             <span className="hostname">

diff --git a/ui_src/src/domain/stationOverview/style.scss b/ui_src/src/domain/stationOverview/style.scss
@@ -13,11 +13,14 @@
     }
     .station-observability {
         min-width: 900px;
-        width: calc(100% - 2vw - var(--main-container-sidebar-width));
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        width: 100%;
+        @media (max-width: 1200px) {
+            width: calc(100% - 2vw - var(--main-container-sidebar-width));
+        }
     }
     .overview-top {
         display: flex;

diff --git a/ui_src/src/domain/stationsList/index.js b/ui_src/src/domain/stationsList/index.js
@@ -116,7 +116,6 @@ const StationsList = () => {
                                 radiusType="circle"
                                 backgroundColorType="purple"
                                 fontSize="16px"
-                                fontWeight="bold"
                                 onClick={() => (!isCloud() || state?.allowedActions?.can_create_stations ? modalFlip(true) : setOpenCloudModal(true))}
                             />
                         </div>

diff --git a/ui_src/src/domain/stationsList/stationBoxOverview/index.js b/ui_src/src/domain/stationsList/stationBoxOverview/index.js
@@ -183,7 +183,7 @@ const StationBoxOverview = ({ station, handleCheckedClick, isCheck }) => {
                         </div>
                         <div className="meta-container">
                             <UserIcon />
-                            <label className="data-labels date">Created by: {station?.station?.created_by_username}</label>
+                            <label className="data-labels date">Created by: {station?.station?.created_by_username.startsWith('$') ? 'system' : station?.station?.created_by_username}</label>
                         </div>
 
                         <div className="tags-list">