Repository: cypress-io/cypress
File: packages/app/src/settings/SettingsContainer.vue (Vue)

Code before:
      <SettingsCard
        :title="t('settingsPage.device.title')"
        :description="t('settingsPage.device.description')"
        :icon="IconLaptop"
        max-height="800px"
      >
        <ExternalEditorSettings :gql="props.gql" />
        <ProxySettings :gql="props.gql" />
        <TestingPreferences :gql="props.gql" />
      </SettingsCard>
      <SettingsCard
        :title="t('settingsPage.cloud.title')"
        :description="t('settingsPage.cloud.description')"
        :icon="IconOdometer"
        max-height="10000px"
      >
        <CloudSettings :gql="props.gql" />
      </SettingsCard>
    </div>
    <hr class="border-gray-100">
    <p class="mx-auto font-light text-center text-gray-500 max-w-500px text-16px leading-24px">
      {{ t('settingsPage.footer.text') }}
    </p>
    <Button
      class="mx-auto group"
      variant="outline"
      :prefix-icon="SettingsIcon"
      prefix-icon-class="icon-dark-gray-500 icon-light-gray-50 group-hocus:icon-dark-indigo-400 group-hocus:icon-light-indigo-50"
      :href="t('settingsPage.footer.buttonLink')"
    >
      {{ t('settingsPage.footer.button') }}
    </Button>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from '@cy/i18n'
import { gql } from '@urql/vue'
import Button from '@cy/components/Button.vue'
import ExternalEditorSettings from './device/ExternalEditorSettings.vue'
import ProxySettings from './device/ProxySettings.vue'
import SettingsCard from './SettingsCard.vue'
import ProjectSettings from './project/ProjectSettings.vue'
import CloudSettings from '../settings/project/CloudSettings.vue'
import TestingPreferences from './device/TestingPreferences.vue'
import type { SettingsContainerFragment } from '../generated/graphql'
import IconLaptop from '~icons/cy/laptop_x24.svg'
import IconOdometer from '~icons/cy/object-odometer_x24.svg'
import IconFolder from '~icons/cy/folder-outline_x24.svg'
import SettingsIcon from '~icons/cy/settings_x16.svg'


Review comment (suggestion):
Above for the `t('settingsPage.footer.text')` should be modified to include the testing type since it's currently wired to only show component. Something like:
```
const footerText = computed(() => t('settingsPage.footer.text', { testingType: props.gql.currentProject?.currentTestingType === 'component' ? 'component' : 'E2E' }))
```

Then you can render `{{ footerText }}`

Code after:
      <SettingsCard
        :title="t('settingsPage.device.title')"
        :description="t('settingsPage.device.description')"
        :icon="IconLaptop"
        max-height="800px"
      >
        <ExternalEditorSettings :gql="props.gql" />
        <ProxySettings :gql="props.gql" />
        <TestingPreferences :gql="props.gql" />
      </SettingsCard>
      <SettingsCard
        :title="t('settingsPage.cloud.title')"
        :description="t('settingsPage.cloud.description')"
        :icon="IconOdometer"
        max-height="10000px"
      >
        <CloudSettings :gql="props.gql" />
      </SettingsCard>
    </div>
    <hr class="border-gray-100">
    <p class="mx-auto font-light text-center text-gray-500 max-w-500px text-16px leading-24px">
      {{ footerText }}
    </p>
    <Button
      class="mx-auto group"
      variant="outline"
      :prefix-icon="SettingsIcon"
      prefix-icon-class="icon-dark-gray-500 icon-light-gray-50 group-hocus:icon-dark-indigo-400 group-hocus:icon-light-indigo-50"
      :href="t('settingsPage.footer.buttonLink')"
    >
      {{ t('settingsPage.footer.button') }}
    </Button>
  </div>
</template>

<script lang="ts" setup>

import { computed } from 'vue'
import { useI18n } from '@cy/i18n'
import { gql } from '@urql/vue'
import Button from '@cy/components/Button.vue'
import ExternalEditorSettings from './device/ExternalEditorSettings.vue'
import ProxySettings from './device/ProxySettings.vue'
import SettingsCard from './SettingsCard.vue'
import ProjectSettings from './project/ProjectSettings.vue'
import CloudSettings from '../settings/project/CloudSettings.vue'
import TestingPreferences from './device/TestingPreferences.vue'
import type { SettingsContainerFragment } from '../generated/graphql'
import IconLaptop from '~icons/cy/laptop_x24.svg'
import IconOdometer from '~icons/cy/object-odometer_x24.svg'
import IconFolder from '~icons/cy/folder-outline_x24.svg'