<commit_before><script>
  import IconHelp from '../../common/icons/IconHelp'
  import ProgressDot from '../../common/progress/progressDot'

  export default {
    components: {
      IconHelp,
      ProgressDot
    },
    props: {
      showReviewLabels: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<template>
  <div class="progress-labels">
    <div class="img-subtext">
      <div class="dot-border"><div class="dot green-dot"></div></div>
      <span>{{ $t('courses.complete') }}</span>
    </div>
    <div class="img-subtext">
      <div class="dot-border"><div class="dot teal-dot"></div></div>
      <span>{{ $t('teacher.in_progress') }}</span>
    </div>
    <div class="img-subtext">
      <div class="dot-border"><div class="dot assigned-dot"></div></div>
      <span>{{ $t('teacher.assigned') }}</span>
    </div>
    <div class="img-subtext" v-if="showReviewLabels">
      <progress-dot
        :is-locked="true"
        class="dot-border"
      />
      <span>{{ $t("common.locked") }}</span>
    </div>
    <div class="img-subtext" v-if="showReviewLabels">
      <div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div>
      <span>{{ $t('teacher_dashboard.concept_flag') }}</span>
    </div>
    <div v-if="showReviewLabels" class="help-container">
      <v-popover
        popover-class="teacher-dashboard-tooltip lighter-p large-width"
        trigger="hover"
      >
        <!-- Triggers the tooltip -->
        <icon-help />
        <!-- The tooltip -->
        <template slot="popover">
          <div>
            <h3 style="margin-bottom: 15px;">{{ $t('teacher_dashboard.support_learning') }}</h3>
            <div class="supportGrid">
              <div class="top-row">
                <p>{{ $t('teacher.all_students') }}</p>
              </div>
              <div class="top-row">
                <div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div>
              </div>
              <div class="description top-row">
                <p>{{ $t('teacher_dashboard.concept_flag_desc') }}</p>
              </div>
              <div class="bottom-row"><p> {{ $t('courses.student') }} </p></div>
              <div class="bottom-row"><div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div></div>
              <div class="description bottom-row">
                <p> {{ $t('teacher_dashboard.concept_flag_desc2') }} </p>
              </div>
            </div>
            <p style="margin-top: 20px; font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace; font-size: 12px;">
              {{ $t('teacher_dashboard.click_progress_dot_tip') }}
            </p>
          </div>
        </template>
      </v-popover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "app/styles/bootstrap/variables";
@import "ozaria/site/styles/common/variables.scss";
@import "app/styles/ozaria/_ozaria-style-params.scss";

.progress-labels {
  // ensure spacers are equal size
  flex: 0.5 0.5 0px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  & > div {
    width: 50px;
    margin: 0 10px;
  }

  & > div.help-container {
    width: 26px;
  }
}

.img-subtext {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @include font-p-4-paragraph-smallest-gray;
  font-size: 10px;
  line-height: 11px;
  text-align: center;
}

.dot-border {
  width: 22px;
  height: 22px;

  margin-bottom: 6px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 3px;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 8px;
}

.green-dot {
  background-color: #2dcd38;
}

.teal-dot {
  background-color: #1ad0ff;
}
<commit_msg>DT: progress color code bubbles/text are unaligned (#6651)<commit_after><script>
  import IconHelp from '../../common/icons/IconHelp'
  import ProgressDot from '../../common/progress/progressDot'

  export default {
    components: {
      IconHelp,
      ProgressDot
    },
    props: {
      showReviewLabels: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<template>
  <div class="progress-labels">
    <div class="img-subtext">
      <div class="dot-border"><div class="dot green-dot"></div></div>
      <span>{{ $t('courses.complete') }}</span>
    </div>
    <div class="img-subtext">
      <div class="dot-border"><div class="dot teal-dot"></div></div>
      <span>{{ $t('teacher.in_progress') }}</span>
    </div>
    <div class="img-subtext">
      <div class="dot-border"><div class="dot assigned-dot"></div></div>
      <span>{{ $t('teacher.assigned') }}</span>
    </div>
    <div class="img-subtext" v-if="showReviewLabels">
      <progress-dot
        :is-locked="true"
        class="dot-border"
      />
      <span>{{ $t("common.locked") }}</span>
    </div>
    <div class="img-subtext" v-if="showReviewLabels">
      <div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div>
      <span>{{ $t('teacher_dashboard.concept_flag') }}</span>
    </div>
    <div v-if="showReviewLabels" class="help-container">
      <v-popover
        popover-class="teacher-dashboard-tooltip lighter-p large-width"
        trigger="hover"
      >
        <!-- Triggers the tooltip -->
        <icon-help />
        <!-- The tooltip -->
        <template slot="popover">
          <div>
            <h3 style="margin-bottom: 15px;">{{ $t('teacher_dashboard.support_learning') }}</h3>
            <div class="supportGrid">
              <div class="top-row">
                <p>{{ $t('teacher.all_students') }}</p>
              </div>
              <div class="top-row">
                <div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div>
              </div>
              <div class="description top-row">
                <p>{{ $t('teacher_dashboard.concept_flag_desc') }}</p>
              </div>
              <div class="bottom-row"><p> {{ $t('courses.student') }} </p></div>
              <div class="bottom-row"><div class="dot-border concept-flag-border"><div class="dot green-dot"></div></div></div>
              <div class="description bottom-row">
                <p> {{ $t('teacher_dashboard.concept_flag_desc2') }} </p>
              </div>
            </div>
            <p style="margin-top: 20px; font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace; font-size: 12px;">
              {{ $t('teacher_dashboard.click_progress_dot_tip') }}
            </p>
          </div>
        </template>
      </v-popover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "app/styles/bootstrap/variables";
@import "ozaria/site/styles/common/variables.scss";
@import "app/styles/ozaria/_ozaria-style-params.scss";

.progress-labels {
  // ensure spacers are equal size
  flex: 0.5 0.5 0px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;

  & > div {
    width: 50px;
    margin: 0 10px;
  }

  & > div.help-container {
    width: 26px;

    ::v-deep .v-popover {
      display: flex;
      .trigger {
        line-height: 19px;
      }
    }
  }
}

.img-subtext {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @include font-p-4-paragraph-smallest-gray;
  font-size: 10px;
  line-height: 11px;
  text-align: center;
  white-space: nowrap;
}

.dot-border {
  width: 22px;
  height: 22px;

  margin-bottom: 6px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 3px;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 8px;
}

.green-dot {
  background-color: #2dcd38;
}

.teal-dot {
  background-color: #1ad0ff;
}

{'fraction_non_alphanumeric': 0.1825699745547074, 'fraction_numerical': 0.012977099236641221, 'mean_word_length': 2.3723723723723724, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 185, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5541701', 'n_tokens_mistral': 2763, 'n_tokens_neox': 2642, 'n_words': 506}