Tune schedules and badge colors (#2496)

# What this PR does Fix rotation modal dateinput overflow, tune schedules colors, fix badge colors ## Which issue(s) this PR fixes #1002 #2356 ## Checklist - [ ] Unit, integration, and e2e (if applicable) tests updated - [ ] Documentation added (or `pr:no public docs` PR label added if not required) - [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not required)
grafana · Jul 12, 2023 · 79fc529 · 79fc529
1 parent 03d5402
commit 79fc529
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Deprecated `/maintenance` web UI page. Maintenance is now handled at the integration level and can be performed
   within a single integration's page. by @Ukochka ([2497](https://github.com/grafana/oncall/issues/2497))
+
+### Fixed
+
+- Schedules: Long popup does not fit screen & buttons unreachable & objects outside of the popup [1002](https://github.com/grafana/oncall/issues/1002)
+- New schedules white theme issues [2356](https://github.com/grafana/oncall/issues/2356)
 
 ## v1.3.9 (2023-07-12)
 

diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.scss
@@ -1,7 +1,3 @@
-$score-primary: rgba(27, 133, 94, 0.15);
-$score-warning: rgba(245, 183, 61, 0.18);
-$score-danger: rgba(209, 14, 92, 0.15);
-
 .root {
   display: flex;
   flex-direction: row;
@@ -18,17 +14,17 @@ $score-danger: rgba(209, 14, 92, 0.15);
   padding: 4px 10px 3px 10px;
 
   &--danger {
-    background-color: $score-danger;
+    background-color: var(--tag-background-danger);
     color: var(--tag-text-danger);
     border: 1px solid var(--tag-border-danger);
   }
   &--warning {
-    background-color: $score-warning;
+    background-color: var(--tag-background-warning);
     color: var(--tag-text-warning);
     border: 1px solid var(--tag-border-warning);
   }
   &--primary {
-    background-color: $score-primary;
+    background-color: var(--tag-background-success);
     color: var(--tag-text-success);
     border: 1px solid var(--tag-border-success);
   }

diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.module.css b/grafana-plugin/src/components/UserGroups/UserGroups.module.css
@@ -51,6 +51,8 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
+  max-height: calc(100vh - 600px);
+  overflow: scroll;
 }
 
 .user {

diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.tsx b/grafana-plugin/src/components/UserGroups/UserGroups.tsx
@@ -33,8 +33,6 @@ const SortableHandleHoc = SortableHandle(DragHandle);
 const UserGroups = (props: UserGroupsProps) => {
   const { value, onChange, isMultipleGroups, renderUser, showError, disabled } = props;
 
-  const rootRef = useRef<HTMLDivElement>();
-
   const handleAddUserGroup = useCallback(() => {
     onChange([...value, []]);
   }, [value]);
@@ -97,17 +95,6 @@ const UserGroups = (props: UserGroupsProps) => {
     };
   };
 
-  useEffect(() => {
-    const container = rootRef.current.parentElement.parentElement.parentElement;
-    const containerParent = container.parentElement;
-
-    containerParent.scroll({
-      left: 0,
-      top: container.scrollHeight,
-      behavior: 'smooth',
-    });
-  }, [value]);
-
   const renderItem = (item: Item, index: number) => (
     <li className={cx('user')}>
       {renderUser(item.data)}
@@ -123,7 +110,7 @@ const UserGroups = (props: UserGroupsProps) => {
   );
 
   return (
-    <div className={cx('root')} ref={rootRef}>
+    <div className={cx('root')}>
       <VerticalGroup>
         {!disabled && (
           <RemoteSelect
@@ -173,8 +160,20 @@ interface SortableListProps {
 
 const SortableList = SortableContainer<SortableListProps>(
   ({ items, handleAddGroup, isMultipleGroups, renderItem, allowCreate }) => {
+    const listRef = useRef<HTMLUListElement>();
+
+    useEffect(() => {
+      const container = listRef.current;
+
+      container.scroll({
+        left: 0,
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      });
+    }, [items]);
+
     return (
-      <ul className={cx('groups')}>
+      <ul className={cx('groups')} ref={listRef}>
         {items.map((item, index) =>
           item.type === 'item' ? (
             <SortableItem key={item.key} index={index}>

diff --git a/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx b/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx
@@ -16,13 +16,13 @@ interface WorkingHoursProps {
   startMoment: dayjs.Dayjs;
   duration: number; // in seconds
   className: string;
-  strong?: boolean;
+  light?: boolean;
 }
 
 const cx = cn.bind(styles);
 
 const WorkingHours: FC<WorkingHoursProps> = (props) => {
-  const { timezone, workingHours = default_working_hours, startMoment, duration, className, strong = false } = props;
+  const { timezone, workingHours = default_working_hours, startMoment, duration, className, light } = props;
 
   const endMoment = startMoment.add(duration, 'seconds');
 
@@ -38,10 +38,10 @@ const WorkingHours: FC<WorkingHoursProps> = (props) => {
     <svg version="1.1" width="100%" height="28px" xmlns="http://www.w3.org/2000/svg" className={className}>
       <defs>
         <pattern id="stripes" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
-          <line x1="0" y="0" x2="0" y2="10" stroke="rgba(17, 18, 23, 0.15)" strokeWidth="10" />
+          <line x1="0" y="0" x2="0" y2="10" stroke="var(--working-hours-shades-color)" strokeWidth="10" />
         </pattern>
-        <pattern id="stripes_strong" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
-          <line x1="0" y="0" x2="0" y2="10" stroke="rgba(17, 18, 23, 0.2)" strokeWidth="10" />
+        <pattern id="stripes_light" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
+          <line x1="0" y="0" x2="0" y2="10" stroke="var(--working-hours-shades-color-light)" strokeWidth="10" />
         </pattern>
       </defs>
       {nonWorkingMoments &&
@@ -56,7 +56,7 @@ const WorkingHours: FC<WorkingHoursProps> = (props) => {
               y={0}
               width={`${(diff * 100) / duration}%`}
               height="100%"
-              fill={`${strong ? 'url(#stripes_strong)' : 'url(#stripes)'}`}
+              fill={light ? 'url(#stripes_light)' : 'url(#stripes)'}
             />
           );
         })}

diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.module.css b/grafana-plugin/src/containers/RotationForm/RotationForm.module.css
@@ -1,6 +1,4 @@
 .body {
-  max-height: calc(100vh - 300px);
-  overflow: scroll;
   margin: 15px -15px;
   padding: 15px 0;
   border-top: var(--border-medium);

diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
@@ -77,7 +77,7 @@ const UsersTimezones: FC<UsersTimezonesProps> = (props) => {
   return (
     <div className={cx('root')}>
       <WorkingHours
-        strong
+        light
         startMoment={currentMoment.startOf('day')}
         duration={24 * 60 * 60}
         timezone={userStore.currentUser.timezone}

diff --git a/grafana-plugin/src/style/vars.css b/grafana-plugin/src/style/vars.css
@@ -22,17 +22,7 @@
   --tag-primary: #299c46;
   --tag-secondary: #464c54;
   --tag-secondary-transparent: rgba(204, 204, 220, 0.07);
-  --tag-background-primary: rgba(56, 113, 220, 0.2);
-  --tag-border-primary: rgba(56, 113, 220, 0.2);
-  --tag-background-danger: rgba(242, 73, 92, 0.15);
-  --tag-text-primary: rgba(110, 159, 255, 1);
-  --tag-border-danger: rgb(151, 11, 27);
-  --tag-text-danger: rgb(247, 144, 156);
-  --tag-border-warning: rgb(150, 75, 0);
-  --tag-background-warning: rgba(245, 183, 61, 0.18);
-  --tag-text-warning: rgb(255, 190, 124);
   --tag-border-link: rgba(56, 113, 220, 0.2);
-  --tag-background-success: rgba(27, 133, 94, 0.15);
 }
 
 .theme-light {
@@ -62,11 +52,23 @@
   --shadows-z1: 0 1px 2px rgba(24, 26, 27, 0.2);
   --shadows-z2: 0 4px 8px rgba(24, 26, 27, 0.2);
   --shadows-z3: 0 13px 20px 1px rgba(24, 26, 27, 0.18);
-  --tag-text-success: rgb(50, 96, 43);
+  --tag-background-primary: rgba(50, 116, 217, 0.15);
+  --tag-border-primary: rgb(136, 174, 233);
+  --tag-text-primary: rgb(26, 71, 139);
+  --tag-background-warning: rgba(255, 120, 10, 0.15);
+  --tag-border-warning: rgb(255, 176, 112);
+  --tag-text-warning: rgb(163, 73, 0);
+  --tag-background-success: rgba(86, 166, 75, 0.15);
   --tag-border-success: rgb(148, 203, 140);
+  --tag-text-success: rgb(50, 96, 43);
+  --tag-background-danger: rgba(224, 47, 68, 0.15);
+  --tag-border-danger: rgb(237, 136, 148);
+  --tag-text-danger: rgb(147, 22, 37);
   --button-background: rgba(36, 41, 46, 0.08);
   --button-hover-background: rgba(36, 41, 46, 0.15);
   --box-background: rgba(244, 245, 245);
+  --working-hours-shades-color: rgba(17, 18, 23, 0.15);
+  --working-hours-shades-color-light: rgba(17, 18, 23, 0.04);
 }
 
 .theme-dark {
@@ -98,9 +100,21 @@
   --shadows-z1: 0 1px 2px rgba(24, 26, 27, 0.75);
   --shadows-z2: 0 4px 8px rgba(24, 26, 27, 0.75);
   --shadows-z3: 0 8px 24px rgb(1, 4, 9);
-  --tag-text-success: rgb(165, 214, 159);
+  --tag-background-primary: rgba(87, 148, 242, 0.15);
+  --tag-border-primary: rgb(13, 72, 163);
+  --tag-text-primary: rgb(158, 193, 247);
+  --tag-background-warning: rgba(255, 152, 48, 0.15);
+  --tag-border-warning: rgb(150, 75, 0);
+  --tag-text-warning: rgb(255, 190, 124);
+  --tag-background-success: rgba(115, 191, 105, 0.15);
   --tag-border-success: rgb(49, 100, 43);
+  --tag-text-success: rgb(165, 214, 159);
+  --tag-background-danger: rgba(242, 73, 92, 0.15);
+  --tag-border-danger: rgb(151, 11, 27);
+  --tag-text-danger: rgb(247, 144, 156);
   --button-background: rgba(204, 204, 220, 0.1);
   --button-hover-background: rgba(204, 204, 220, 0.14);
   --box-background: rgba(10, 10, 10, 0.4);
+  --working-hours-shades-color: rgba(17, 18, 23, 0.15);
+  --working-hours-shades-color-light: rgba(17, 18, 23, 0.1);
 }