ヘルプ画面のライセンス情報セクションのリデザイン (#1650)

package.json

@@ -53,6 +53,7 @@
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "quasar": "2.11.6",
+    "radix-vue": "1.2.3",
     "semver": "7.5.4",
     "shlex": "2.1.2",
     "source-map-support": "0.5.19",

src/components/base/BaseButton.vue

@@ -0,0 +1,92 @@
+<template>
+  <button
+    class="button"
+    :class="variant ? variant : 'default'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <!-- 暫定でq-iconを使用 -->
+    <q-icon v-if="icon" :name="icon" size="sm" />
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  icon?: string;
+  variant?: "default" | "primary" | "danger";
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border-radius: vars.$radius-1;
+  padding: 0 vars.$padding-2;
+  gap: vars.$gap-1;
+  border: 1px solid;
+  transition: background-color vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.default {
+  color: #222;
+  background-color: #fff;
+  border-color: #0002;
+
+  &:hover:not(:disabled) {
+    background-color: #f4f5f4;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ebeceb;
+  }
+}
+
+.primary {
+  color: #fff;
+  border-color: #0002;
+  background-color: #a5d4ad;
+
+  &:hover:not(:disabled) {
+    background-color: #97cfa1;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #86c291;
+  }
+}
+
+.danger {
+  color: #d04756;
+  border-color: #d04756;
+  background-color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #ffe0e0;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ffc1c1;
+  }
+}
+</style>

src/components/base/BaseRowCard.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="row-card"
+    :class="{ clickable: clickable }"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="text">
+      <div class="title">{{ title }}</div>
+      <div class="description">{{ description }}</div>
+    </div>
+    <div class="control">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  clickable: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
+
+.row-card {
+  display: flex;
+  text-align: unset;
+  align-items: center;
+  border: 1px solid #0002;
+  background-color: #fff;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
+  transition: background-color vars.$transition-duration;
+}
+
+.clickable:not(:disabled) {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f5f4;
+  }
+
+  &:active {
+    background-color: #ebeceb;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.text {
+  flex-grow: 1;
+}
+
+.description {
+  font-size: 0.75rem;
+}
+</style>