feat: update style guide (#11866)

2026-01-07 13:07:22 +00:00 · 2023-06-02 21:51:20 +05:30 · 2023-06-02 21:51:20 +05:30 · 6c4590aa0d
commit 6c4590aa0d
parent e21f38c5fd
15 changed files with 68 additions and 31 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCardV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCardV1.tsx
@ -71,7 +71,11 @@ const ActivityFeedCardV1 = ({

  return (
    <>
-      <div className={classNames(className, 'activity-feed-card')}>
+      <div
+        className={classNames(
+          className,
+          'activity-feed-card activity-feed-card-v1'
+        )}>
        <Row>
          <Col span={24}>
            <FeedCardHeaderV1
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/feed-card-header-v1.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/feed-card-header-v1.style.less
@ -21,7 +21,7 @@
  }
  .feed-header-timestamp {
    font-size: 12px;
-    color: @timestamp-color;
+    color: @grey-2;
  }
  .feed-header-timestamp::before {
    content: '\2022';
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/activity-feed-card.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/activity-feed-card.style.less
@ -29,6 +29,22 @@
  }
 }

+.activity-feed-card-v1 {
+  .diff-added {
+    background: rgba(0, 131, 118, 0.2);
+    color: @success-color;
+    width: fit-content;
+  }
+  .diff-removed {
+    color: @grey-2;
+    text-decoration: line-through;
+    width: fit-content;
+  }
+  .diff-description {
+    color: @success-color;
+  }
+}
+
 .feed-actions {
  position: absolute;
  display: inline-block;
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/ActivityFeedActions.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/ActivityFeedActions.tsx
@ -10,7 +10,6 @@
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
-import { LeftOutlined } from '@ant-design/icons';
 import { Button, Popover } from 'antd';
 import AppState from 'AppState';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
@ -29,6 +28,7 @@ import { useTranslation } from 'react-i18next';
 import SVGIcons, { Icons } from 'utils/SvgUtils';
 import { useActivityFeedProvider } from '../ActivityFeedProvider/ActivityFeedProvider';
 import DeleteConfirmationModal from '../DeleteConfirmationModal/DeleteConfirmationModal';
+import { ReactComponent as RightIcon } from '/assets/svg/arrow-right-light.svg';
 import { ReactComponent as DeleteIcon } from '/assets/svg/ic-delete.svg';

 interface ActivityFeedActionsProps {
@ -134,8 +134,8 @@ const ActivityFeedActions = ({
    <>
      <div className="feed-actions">
        <Button
-          className="expand-button"
-          icon={<LeftOutlined />}
+          className="d-flex justify-center items-center expand-button"
+          icon={<RightIcon className="rotate-inverse" />}
          size="small"
        />

--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChartV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChartV1.tsx
@ -153,7 +153,7 @@ const KPIChartV1: FC<Props> = ({ kpiList, selectedDays }) => {
      loading={isLoading}
      title={
        <div className="p-y-sm">
-          <Typography.Text className="font-normal">
+          <Typography.Text className="font-medium">
            {t('label.kpi-title')}
          </Typography.Text>
        </div>
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightV1.tsx
@ -96,7 +96,7 @@ const TotalEntityInsightV1: FC<Props> = ({ selectedDays }) => {
      {data.length ? (
        <Row>
          <Col span={14}>
-            <Typography.Text>
+            <Typography.Text className="font-medium">
              {t('label.data-insight-total-entity-summary')}
            </Typography.Text>
            <div className="p-t-lg">
@ -131,7 +131,7 @@ const TotalEntityInsightV1: FC<Props> = ({ selectedDays }) => {
              <Col className="p-b-sm" span={24}>
                <div className="d-flex justify-between">
                  <div className="d-flex flex-col">
-                    <Typography.Text>
+                    <Typography.Text className="font-medium">
                      {t('label.total-entity', {
                        entity: t('label.asset-plural'),
                      })}
@ -197,7 +197,7 @@ const TotalEntityInsightV1: FC<Props> = ({ selectedDays }) => {
      ) : (
        <Row>
          <Col span={14}>
-            <Typography.Text>
+            <Typography.Text className="font-medium">
              {t('label.data-insight-total-entity-summary')}
            </Typography.Text>
          </Col>
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less
@ -49,22 +49,29 @@
  height: 100%;
 }

-.left-panel-item,
-.left-panel-item.active,
-.left-panel-item:hover {
-  .left-panel-label {
-    color: @text-color;
-    text-decoration: none;
-  }
-
+.left-panel-item {
  svg {
-    color: @text-color;
+    color: @text-grey-muted;
  }
 }

 .left-panel-item.active,
 .left-panel-item:hover {
  background-color: @left-nav-item-background;
+  .left-panel-label {
+    color: @text-color;
+    text-decoration: none;
+  }
+
+  svg {
+    color: @primary-color-hover;
+  }
+}
+
+.left-panel-item.active,
+.left-panel-item:hover {
+  background-color: @left-nav-item-background;
+  color: @text-color;

  svg {
    color: @primary-color-hover;
@ -82,9 +89,9 @@
  }
 }

-.left-panel-label {
+.left-panel-label.ant-typography {
  font-size: 12px;
-  color: @text-grey-muted !important;
+  color: @text-grey-muted;
  font-weight: 500;
  padding-top: 0.5rem;
  line-height: 26px;
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
@ -65,7 +65,7 @@ const MyDataWidgetInternal = () => {
      loading={isLoading}
      title={
        <div className="d-flex justify-between p-y-sm">
-          <Typography.Text className="font-normal">
+          <Typography.Text className="font-medium">
            {t('label.my-data')}
          </Typography.Text>
          {data.length ? (
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx
@ -107,7 +107,7 @@ const RightSidebar = ({
            <>
              {followedData.length ? (
                <Link
-                  className="view-all-btn"
+                  className="view-all-btn text-grey-muted"
                  data-testid="following-data"
                  to={getUserPath(currentUserDetails?.name ?? '', 'following')}>
                  <span className="font-normal text-xs">
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/Tags.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/Tags.less
@ -22,7 +22,6 @@
    font-weight: 500;
    cursor: pointer;
    justify-content: center;
-    background-color: @white;
    padding: 1px 8px;
    margin: 0 4px 1px 0;
  }
@ -38,3 +37,6 @@
    background-color: transparent;
  }
 }
+.plus-more-tag.ant-tag {
+  color: @link-color;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/tags-viewer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/tags-viewer.tsx
@ -91,8 +91,10 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
              overlayClassName="tag-popover-container"
              placement="bottom"
              trigger="click">
-              <Tag data-testid="plus-more-count">{`+${
-                sortedTagsBySource.length - LIST_SIZE
+              <Tag
+                className="cursor-pointer plus-more-tag"
+                data-testid="plus-more-count">{`+${
+                sortedTagsBySource.length - sizeCap
              } more`}</Tag>
            </Popover>
          )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/recently-viewed.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/recently-viewed.less
@ -15,6 +15,7 @@

 .right-panel-heading {
  margin-bottom: 8px !important;
+  font-weight: 500;
 }

 .right-panel-list-item:last-child {
@ -36,8 +37,8 @@
    align-items: center;
    justify-content: center;
    svg {
-      height: 16px;
-      width: 16px;
+      height: 20px;
+      width: 20px;
    }
  }
 }
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/my-data.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/my-data.less
@ -33,7 +33,7 @@
 }

 .view-all-btn {
-  color: @group-title-color !important;
+  color: @grey-3 !important;
 }

 .card-widget {
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@ -104,7 +104,7 @@ a[href].link-text-grey,
  color: @white;
 }
 .text-grey-muted {
-  color: #6b7280;
+  color: @text-grey-muted;
 }
 .text-grey-body {
  color: @text-color-secondary;
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@ -25,7 +25,10 @@
@text-color: #292929;
@text-color-secondary: #292929;
@text-color-tertiary: #00000080;
-@text-grey-muted: #6b7280d9;
+@grey-1: #f2f2f2;
+@grey-2: #959595;
+@grey-3: #757575;
+@text-grey-muted: @grey-3;
@font-size-base: 14px;
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
@ -41,7 +44,7 @@
@card-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
@body-bg-color: #f8f9fa;
@body-dark-bg-color: #f1f1f3;
-@border-color: #dde3ea;
+@border-color: #0000001a;
@global-border: 1px solid @border-color;
@active-color: #e8f4ff;
@background-color: #ffffff;
@ -56,3 +59,5 @@
@code-background: #ebeff480;
@timestamp-color: #9197b3;
@left-sidebar-icon-hover: #edecf8;
+@divider-color: @border-color;
+@tag-default-bg: @grey-1;