diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue
index 20020f9e..2a11bdc2 100644
--- a/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue
@@ -2,16 +2,18 @@
$
-
-
-
- Copy
-
-
+
@@ -68,8 +70,10 @@ export default defineComponent({
font-size: 0.8rem;
user-select: none;
}
- .copy-button {
+ .copy-action-container {
margin-left: 1rem;
+ }
+ .copy-button {
@include clickable;
@include hover-or-touch {
color: $color-primary;
diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts b/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts
index 21d389bd..ce280c05 100644
--- a/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts
+++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts
@@ -27,7 +27,6 @@ export class LinuxInstructionsBuilder extends InstructionsBuilder {
+ '
Alt-T: Parrot OS…'
+ 'Ctrl-Alt-Insert: Bodhi Linux…'
+ ''
- + '
'
,
},
}))
diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue
new file mode 100644
index 00000000..c9d86d4a
--- /dev/null
+++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue
index 69cb57ab..d631843f 100644
--- a/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue
@@ -13,8 +13,8 @@
2. The hard (manual) alternative. This requires you to do additional manual
- steps. If you are unsure how to follow the instructions, hover on information
- ()
+ steps. If you are unsure how to follow the instructions, tap or hover on information
+ (Engage with icons like this for extra wisdom!)
icons near the steps, or follow the easy alternative described above.
@@ -26,27 +26,15 @@
>
{{ step.action.instruction }}
-
-
-
-
-
-
+
{{ step.code.instruction }}
-
-
-
-
-
-
+
@@ -60,16 +48,14 @@ import {
} from 'vue';
import { injectKey } from '@/presentation/injectionSymbols';
import { OperatingSystem } from '@/domain/OperatingSystem';
-import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
-import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
import CodeInstruction from './CodeInstruction.vue';
import { IInstructionListData } from './InstructionListData';
+import InfoTooltip from './InfoTooltip.vue';
export default defineComponent({
components: {
CodeInstruction,
- TooltipWrapper,
- AppIcon,
+ InfoTooltip,
},
props: {
data: {
@@ -125,7 +111,7 @@ function renderOsName(os: OperatingSystem): string {
margin-top: 0.5em;
}
}
-.explanation {
- margin-left: 0.5em;
+.details-container {
+ margin-left: 0.5em; // Do not style icon itself to ensure correct tooltip alignment
}