Verified Commit fc229c74 authored by Marek Veselý's avatar Marek Veselý
Browse files

feat: improve spacing

parent 8b2a73fb

frontend/src/instructor/InstructorQuestionnaire/QuestionnaireTitle.tsx

+18 −16
Original line number Diff line number Diff line
@@ -19,21 +19,22 @@ export const QuestionnaireTitle: FC<QuestionnaireTitleProps> = ({ 
      className={css`

        display: flex;

        flex-direction: column;

        padding: 0.5rem 0;

      `}

    >

      <H6

      <H6>{questionnaire.displayName}</H6>

      <div

        className={css`

          margin-bottom: 0.5rem;

          display: flex;

          flex-direction: column;

          gap: 2rem;

        `}

      >

        {questionnaire.displayName}

      </H6>

        <div

          className={css`

            display: flex;

            gap: 0.25rem;

            flex-wrap: wrap;

          ${showSummaryStatus ? 'margin-bottom: 1rem;' : ''}

          `}

        >

          <QuestionnaireTags questionnaire={questionnaire} />
@@ -44,5 +45,6 @@ export const QuestionnaireTitle: FC<QuestionnaireTitleProps> = ({ 
          />

        )}

      </div>

    </div>

  )

}

frontend/src/instructor/InstructorQuestionnaire/SummaryQuestionnaireStatus.tsx

+3 −1
Original line number Diff line number Diff line
@@ -42,8 +42,10 @@ export const SummaryQuestionnaireStatus: FC< 
        Classes.PROGRESS_NO_STRIPES,

        css`

          display: flex;

          min-height: 1.5rem;

          background: unset !important;

          height: unset;

          border-radius: unset !important;

          padding: 0 1rem;

        `

      )}

    >

frontend/src/instructor/InstructorQuestionnaire/SummaryQuestionnaireStatusSegment.tsx

+23 −13
Original line number Diff line number Diff line
@@ -45,16 +45,26 @@ export const SummaryQuestionnaireStatusSegment: FC< 
          {count}

        </div>

      }

      interactionKind='hover'

      className={css`

        flex: ${percent};

      `}

      interactionKind='hover'

    >

      <div

        className={css`

          display: flex;

          flex-direction: column;

          align-items: center;

          gap: 0.12rem;

        `}

      >

        <div

          className={cx(

            Classes.TAG,

            Classes.intentClass(getIntent(status)),

            css`

              width: 100%;

              min-height: unset;

              position: static !important;

              border-radius: ${borderRadius} !important;

              display: flex;
@@ -62,7 +72,7 @@ export const SummaryQuestionnaireStatusSegment: FC< 
              justify-content: center;

            `

          )}

      >

        />

        <span

          className={cx(

            Classes.TEXT_SMALL,
@@ -83,7 +93,7 @@ export const SummaryQuestionnaireStatusSegment: FC< 
        <Divider

          key={`divider-${status}`}

          className={css`

            margin: 0;

            margin: 0 0.25rem;

          `}

        />

        {meter}