style image in text links

src/app/features/administration/form/option-link/option-link.component.html

@@ -4,34 +4,29 @@
 	</h1>
 
 	<!--{{ 'choices.helper' |translate}}-->
-	<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii">
+	<div class="rounded-block has-nopadbottom" *ngFor="let choice of StorageService.choicesText; index as ii">
 		<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
 		<input type="text" [(ngModel)]="choice.name" class="input" />
 
-		<div class="image-preview" *ngIf="choice.url_display">
-			<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" />
+		<div class="pull-left" *ngIf="choice.url_display">
+			<img src="{{ choice.url_display }}" alt="image" class="image-preview is-rounded" />
 		</div>
 		<div class="href-preview" *ngIf="choice.url_href">
-			{{ choice.url_href }}
+			<a href="{{ choice.url_href }}">{{ choice.url_href }}</a>
 		</div>
 		<div class="link-land">
 			<button
 				(click)="openLinkModal(choice)"
-				class="link-button has-no-background has-background-link-icon has-background-icon-left is-filtered-icon-primary"
-				*ngIf="!choice.url_href || !choice.url_display"
+				class="link-button has-background-icon-left is-filtered-icon-primary is-fullwidth"
+				[ngClass]="{
+					'has-background-edit': url_href || url_display,
+					'has-background-link-icon': url_href || url_display
+				}"
 			>
-				{{ 'choices.add_link' | translate }}
+				<!--			{{evalChoiceUrl(choice)}}	, -->
+				{{ evalChoiceUrl(choice) | translate }}
 			</button>
-			<!--			<button (click)="openLinkModal(choice)"-->
-			<!--							class="button  is-secondary has-background-link has-background-icon-left is-filtered-icon-primary"-->
-			<!--							*ngIf="choice.url_href || choice.url_display">-->
-			<!--				{{ 'SENTENCES.Edit' | translate }}-->
-			<!--			</button>-->
 		</div>
-		<!--		<button class="button delete-date is-block" (click)="StorageService.choicesText.splice(ii, 1)">-->
-		<!--			<img class="icon" src="assets/icons/trash-2.svg" />-->
-		<!--			{{ 'choices.delete' | translate }}-->
-		<!--		</button>-->
 
 		<hr />
 		<div class="down-line-button-container">

src/app/features/administration/form/option-link/option-link.component.scss

@@ -3,4 +3,13 @@
 	.link-land {
 		margin-left: -1rem;
 	}
+	.image-preview {
+		border-radius: 100%;
+		width: 40px;
+		height: 40px;
+		margin-right: 1rem;
+	}
+	.href-preview {
+		color: #6359cf;
+	}
 }

src/app/features/administration/form/option-link/option-link.component.ts

@@ -8,13 +8,17 @@ import { ChoiceText } from '../../../../core/models/choice.model';
 	styleUrls: ['./option-link.component.scss'],
 })
 export class OptionLinkComponent implements OnInit {
-	public url_href: string;
-	public url_display: string;
+	public url_href: string = '';
+	public url_display: string = '';
 	public choice_for_modal: ChoiceText; // choice to be modified after validation of modal
 	public display_option_dialog: boolean = false;
 
 	constructor(public StorageService: StorageService) {}
 
+	evalChoiceUrl(choice) {
+		return !choice.url_href && !choice.url_display ? 'choices.add_link' : 'SENTENCES.Edit';
+	}
+
 	ngOnInit(): void {}
 
 	openLinkModal(choice: ChoiceText) {

src/styles/dev-utilities/_helpers.scss

@@ -128,6 +128,9 @@
 .has-background-link-icon {
 	background: url('/assets/icons/link.svg') no-repeat 16px center;
 }
+.has-background-edit {
+	background: url('/assets/icons/edit.svg') no-repeat 16px center;
+}
 .has-background-plus {
 	background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
 }
@@ -137,3 +140,7 @@
 .is-block {
 	display: block;
 }
+
+.has-nopadbottom {
+	padding-bottom: 0;
+}

src/styles/partials/_buttons.scss

@@ -23,7 +23,7 @@ button,
 a {
 	@extend .outlined;
 	text-align: center;
-	padding: 10px 30px;
+	//padding: 10px 30px;
 	border: 1px solid transparent;
 	box-sizing: border-box;
 	border-radius: 4px;
@@ -196,6 +196,7 @@ a {
 		font-size: 16px;
 		line-height: 20px;
 		@extend .outlined;
+		margin-top: -0.5rem;
 
 		&:hover {
 			color: $white !important;