Commit 6b2b140f authored by Filip Šenk's avatar Filip Šenk
Browse files

Added css for selected milestone and selected actionlog

parent 531ae17b

frontend/src/analyst/ActionLog/index.tsx

+12 −4
Original line number Diff line number Diff line
@@ -16,9 +16,9 @@ import type { selectedReducerActionProps } from '../Overview/selectedReducer' 
import useFormatTimestamp from '../useFormatTimestamp'

import {

  actionTypeColor,

  ACTIVE_COLOR,

  compareDates,

  getTeamById,

  highlightedOnActive,

  highlightedOnHover,

} from '../utilities'
@@ -81,9 +81,13 @@ type ActionLogItem = { 


interface ActionLogProps {

  selectedDispatch: Dispatch<selectedReducerActionProps>

  selectedId?: string

}

const selectedClass = css`

  background-color: ${ACTIVE_COLOR};

`



const ActionLog: FC<ActionLogProps> = ({ selectedDispatch }) => {

const ActionLog: FC<ActionLogProps> = ({ selectedDispatch, selectedId }) => {

  const milestoneStates = useMilestoneStates()

  const actionLogs = useActionLogs()

  const timeRelative = useRelativeTime()
@@ -162,7 +166,9 @@ const ActionLog: FC<ActionLogProps> = ({ selectedDispatch }) => { 
          {items.map(item => (

            <tr

              key={item.id}

              className={cx(highlightedOnHover, highlightedOnActive)}

              className={cx(highlightedOnHover, {

                [selectedClass]: item.id === selectedId,

              })}

              style={{

                display: 'table',

                tableLayout: 'fixed',
@@ -203,5 +209,7 @@ const ActionLog: FC<ActionLogProps> = ({ selectedDispatch }) => { 


export default memo(

  ActionLog,

  (prev, next) => prev.selectedDispatch === next.selectedDispatch

  (prev, next) =>

    prev.selectedDispatch === next.selectedDispatch &&

    prev.selectedId === next.selectedId

)

frontend/src/analyst/Milestones/MilestoneCard.tsx

+3 −1
Original line number Diff line number Diff line 
import MilestoneDescription from '@/components/Description/MilestoneDescription'

import { Callout, H6 } from '@blueprintjs/core'

import { Callout, Colors, H6 } from '@blueprintjs/core'

import { Flag } from '@blueprintjs/icons'

import { css } from '@emotion/css'

import type { MilestoneState } from '@inject/graphql'
@@ -25,10 +25,12 @@ export const milestoneCard = (isSelected?: boolean) => css` 
  text-align: center;

  height: 69;

  cursor: pointer;

  border: 2px transparent solid;



  ${isSelected

    ? css`

        box-shadow: 0 0.125rem 0.25rem rgb(17 20 24 / 15%);

        border: 2px ${Colors.BLUE4} solid;

      `

    : css`

        &:hover {

frontend/src/analyst/Overview/index.tsx

+4 −1
Original line number Diff line number Diff line
@@ -340,7 +340,10 @@ const Overview: FC<OverviewProps> = ({ selectedState, selectedDispatch }) => { 
        </div>

        <Divider />

        <div className={footerElement}>

          <ActionLog selectedDispatch={selectedDispatch} />

          <ActionLog

            selectedDispatch={selectedDispatch}

            selectedId={selectedState.actionLog?.id}

          />

        </div>

      </div>

    </div>