Harmonize Y+S logo on all channels & add icons in settings

frontend/src/components/campAdmin/CampActivityProgressLabels.vue

@@ -1,23 +1,23 @@
 <template>
-  <content-group>
-    <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
-        {{ $tc('components.campAdmin.campActivityProgressLabels.title') }}
-        <DialogActivityProgressLabelCreate v-if="!disabled" :camp="camp">
-          <template #activator="{ on }">
-            <ButtonAdd
-              color="secondary"
-              text
-              :hide-label="$vuetify.breakpoint.xsOnly"
-              class="my-n2"
-              v-on="on"
-            >
-              {{ $tc('components.campAdmin.campActivityProgressLabels.create') }}
-            </ButtonAdd>
-          </template>
-        </DialogActivityProgressLabelCreate>
-      </div>
-    </slot>
+  <content-group
+    :title="$tc('components.campAdmin.campActivityProgressLabels.title')"
+    icon="mdi-eye-check"
+  >
+    <template #title-actions>
+      <DialogActivityProgressLabelCreate v-if="!disabled" :camp="camp">
+        <template #activator="{ on }">
+          <ButtonAdd
+            color="secondary"
+            text
+            :hide-label="$vuetify.breakpoint.xsOnly"
+            class="my-n2"
+            v-on="on"
+          >
+            {{ $tc('components.campAdmin.campActivityProgressLabels.create') }}
+          </ButtonAdd>
+        </template>
+      </DialogActivityProgressLabelCreate>
+    </template>
     <v-skeleton-loader
       v-if="camp.progressLabels()._meta.loading"
       type="list-item@3"

frontend/src/components/campAdmin/CampAddress.vue

@@ -3,7 +3,10 @@ Displays address and allows to edit
 -->
 
 <template>
-  <content-group :title="$tc('components.campAdmin.campAddress.title')">
+  <content-group
+    :title="$tc('components.campAdmin.campAddress.title')"
+    icon="mdi-map-marker"
+  >
     <v-skeleton-loader v-if="camp._meta.loading" type="article" />
     <div v-else class="mt-3">
       <api-form :entity="camp" name="camp">

frontend/src/components/campAdmin/CampCategories.vue

@@ -1,23 +1,23 @@
 <template>
-  <content-group>
-    <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
-        {{ $tc('components.campAdmin.campCategories.title') }}
-        <DialogCategoryCreate v-if="!disabled" :camp="camp">
-          <template #activator="{ on }">
-            <ButtonAdd
-              color="secondary"
-              text
-              :hide-label="$vuetify.breakpoint.xsOnly"
-              class="my-n2"
-              v-on="on"
-            >
-              {{ $tc('components.campAdmin.campCategories.create') }}
-            </ButtonAdd>
-          </template>
-        </DialogCategoryCreate>
-      </div>
-    </slot>
+  <content-group
+    :title="$tc('components.campAdmin.campCategories.title')"
+    icon="mdi-shape"
+  >
+    <template #title-actions>
+      <DialogCategoryCreate v-if="!disabled" :camp="camp">
+        <template #activator="{ on }">
+          <ButtonAdd
+            color="secondary"
+            text
+            :hide-label="$vuetify.breakpoint.xsOnly"
+            class="my-n2"
+            v-on="on"
+          >
+            {{ $tc('components.campAdmin.campCategories.create') }}
+          </ButtonAdd>
+        </template>
+      </DialogCategoryCreate>
+    </template>
     <v-skeleton-loader
       v-if="camp.categories()._meta.loading"
       type="list-item@3"

frontend/src/components/campAdmin/CampConditionalFields.vue

@@ -5,7 +5,10 @@ Displays fields which don't apply to all camps, but are required for some
 <template>
   <v-expansion-panel>
     <v-expansion-panel-header>
-      <h2 class="subtitle-1 font-weight-bold">
+      <h2 class="subtitle-1 font-weight-bold d-flex align-center">
+        <v-icon left size="20">{{
+          $i18n.locale.includes('it') ? '$vuetify.icons.gs' : '$vuetify.icons.js'
+        }}</v-icon>
         {{ $tc('components.campAdmin.campConditionalFields.title') }}
       </h2>
     </v-expansion-panel-header>
@@ -14,6 +17,7 @@ Displays fields which don't apply to all camps, but are required for some
         <v-col cols="12" md="6" class="pb-0">
           <content-group
             :title="$tc('components.campAdmin.campConditionalFields.ysCamp.title')"
+            icon="mdi-tent"
           >
             <v-skeleton-loader v-if="camp._meta.loading" type="article" />
             <div v-else class="mt-3">
@@ -30,6 +34,7 @@ Displays fields which don't apply to all camps, but are required for some
         <v-col cols="12" md="6" class="pb-0">
           <content-group
             :title="$tc('components.campAdmin.campConditionalFields.course.title')"
+            icon="mdi-school"
           >
             <v-skeleton-loader v-if="camp._meta.loading" type="article" />
             <div v-else class="mt-3">

frontend/src/components/campAdmin/CampPeriods.vue

@@ -3,27 +3,25 @@ Displays all periods of a single camp and allows to edit them & create new ones
 -->
 
 <template>
-  <content-group>
-    <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
-        {{
-          $tc('components.campAdmin.campPeriods.title', api.get().camps().items.length)
-        }}
-        <dialog-period-create v-if="!disabled" :camp="camp">
-          <template #activator="{ on }">
-            <button-add
-              color="secondary"
-              text
-              class="my-n2"
-              :hide-label="$vuetify.breakpoint.xsOnly"
-              v-on="on"
-            >
-              {{ $tc('components.campAdmin.campPeriods.createPeriod') }}
-            </button-add>
-          </template>
-        </dialog-period-create>
-      </div>
-    </slot>
+  <content-group
+    :title="$tc('components.campAdmin.campPeriods.title', api.get().camps().items.length)"
+    icon="mdi-calendar-multiple"
+  >
+    <template #title-actiona>
+      <dialog-period-create v-if="!disabled" :camp="camp">
+        <template #activator="{ on }">
+          <button-add
+            color="secondary"
+            text
+            class="my-n2"
+            :hide-label="$vuetify.breakpoint.xsOnly"
+            v-on="on"
+          >
+            {{ $tc('components.campAdmin.campPeriods.createPeriod') }}
+          </button-add>
+        </template>
+      </dialog-period-create>
+    </template>
     <v-skeleton-loader v-if="camp.periods()._meta.loading" type="article" />
     <v-list>
       <period-item

frontend/src/components/campAdmin/CampSettings.vue

@@ -3,7 +3,10 @@ Displays details on a single camp and allows to edit them.
 -->
 
 <template>
-  <content-group :title="$tc('components.campAdmin.campSettings.title')">
+  <content-group
+    :title="$tc('components.campAdmin.campSettings.title')"
+    icon="mdi-information"
+  >
     <v-skeleton-loader v-if="camp._meta.loading" type="article" />
     <div v-else class="mt-3">
       <api-form :entity="camp" name="camp">

frontend/src/components/layout/ContentGroup.vue

@@ -10,8 +10,9 @@ Displays the content wrapped inside a card.
         v-if="title"
         class="ec-content-group__title py-1 subtitle-1"
       >
-        <v-icon v-if="icon" left>{{ icon }}</v-icon>
+        <v-icon v-if="icon" left size="20" class="mb-n1">{{ icon }}</v-icon>
         {{ title }}
+        <v-spacer />
         <slot name="title-actions" />
       </component>
     </slot>

frontend/src/plugins/vuetify.js

@@ -7,6 +7,8 @@ import GoogleLogo from '@/assets/GoogleLogo.svg'
 import eCampLogo from '@/assets/eCampLogo.svg'
 import CeviLogo from '@/assets/CeviLogo.svg'
 import JublaLogo from '@/assets/JublaLogo.svg'
+import JSLogo from '@/common/assets/logos/JSLogo.svg'
+import GSLogo from '@/common/assets/logos/GSLogo.svg'
 import TentDay from '@/assets/tents/TentDay.svg'
 import PaperSize from '@/assets/icons/PaperSize.svg'
 import BigScreen from '@/assets/icons/BigScreen.svg'
@@ -30,6 +32,8 @@ class VuetifyLoaderPlugin {
           ecamp: { component: eCampLogo },
           cevi: { component: CeviLogo },
           jubla: { component: JublaLogo },
+          js: { component: JSLogo },
+          gs: { component: GSLogo },
           tentDay: { component: TentDay },
           paperSize: { component: PaperSize },
           bigScreen: { component: BigScreen },

pdf/src/campPrint/picasso/PicassoPage.vue

@@ -1,16 +1,16 @@
 <template>
   <Page size="A4" :orientation="orientation" class="page">
     <View class="picasso-title-container">
-      <Text :id="`${id}-${period.id}`" :bookmark="bookmark" class="picasso-title">
-        {{ $tc('print.picasso.title', { period: period.description }) }}
-      </Text>
-      <Text class="picasso-organizer">{{ period.camp().organizer }}</Text>
       <YSLogo
         v-if="period.camp().printYSLogoOnPicasso"
         :size="20"
         :locale="config.language"
         class="picasso-ys-logo"
       />
+      <Text :id="`${id}-${period.id}`" :bookmark="bookmark" class="picasso-title">
+        {{ $tc('print.picasso.title', { period: period.description }) }}
+      </Text>
+      <Text class="picasso-organizer">{{ period.camp().organizer }}</Text>
     </View>
     <View class="picasso-calendar-header-container">
       <TimeColumnSpacer :times="times.slice(0, times.length - 1)" />
@@ -99,8 +99,10 @@ export default {
 .picasso-title-container {
   display: flex;
   flex-direction: row;
-  margin-top: -6pt;
-  align-items: baseline;
+  margin-top: -4pt;
+  margin-bottom: 4pt;
+  align-items: center;
+  gap: 8pt;
 }
 .picasso-title {
   flex-grow: 1;
@@ -112,7 +114,7 @@ export default {
 }
 .picasso-ys-logo {
   align-self: flex-end;
-  margin-left: 3pt;
+  margin-top: 3pt;
   size: 20;
 }
 .picasso-calendar-header-container {

pdf/src/renderer/__tests__/__snapshots__/picasso.spec.json.snap

@@ -7,6 +7,39 @@
         {
           "box": {},
           "children": [
+            {
+              "box": {},
+              "children": [
+                {
+                  "box": {},
+                  "children": [],
+                  "parent": [Circular],
+                  "props": {
+                    "class": "ys-logo-path",
+                    "d": "M747 324H640A140 150 0 01745.7661 466.6977V581.2591A1 1 0 01383 565H431.9795V435.5404H563.7701V324.1804H431.9795V193.2711H381.9101A152 160 0 01747 190V324M373.6341 8.7111V193.2844H321.8635V324.1804H186.8021V8.4524H373.6341M321.5128 564.8657H372.7061A1 1 0 018 581V435.5484H321.5128V564.8657",
+                  },
+                  "style": {
+                    "fill": "#e92d35",
+                    "fillRule": "evenodd",
+                    "stroke": "none",
+                  },
+                  "type": "PATH",
+                },
+              ],
+              "parent": [Circular],
+              "props": {
+                "class": "picasso-ys-logo",
+                "height": 20,
+                "viewBox": "0 0 755.907 755.907",
+                "width": 20,
+              },
+              "style": {
+                "alignSelf": "flex-end",
+                "marginTop": "3pt",
+                "size": "20",
+              },
+              "type": "SVG",
+            },
             {
               "box": {},
               "children": [
@@ -44,49 +77,18 @@
               },
               "type": "TEXT",
             },
-            {
-              "box": {},
-              "children": [
-                {
-                  "box": {},
-                  "children": [],
-                  "parent": [Circular],
-                  "props": {
-                    "class": "ys-logo-path",
-                    "d": "M747 324H640A140 150 0 01745.7661 466.6977V581.2591A1 1 0 01383 565H431.9795V435.5404H563.7701V324.1804H431.9795V193.2711H381.9101A152 160 0 01747 190V324M373.6341 8.7111V193.2844H321.8635V324.1804H186.8021V8.4524H373.6341M321.5128 564.8657H372.7061A1 1 0 018 581V435.5484H321.5128V564.8657",
-                  },
-                  "style": {
-                    "fill": "#e92d35",
-                    "fillRule": "evenodd",
-                    "stroke": "none",
-                  },
-                  "type": "PATH",
-                },
-              ],
-              "parent": [Circular],
-              "props": {
-                "class": "picasso-ys-logo",
-                "height": 20,
-                "viewBox": "0 0 755.907 755.907",
-                "width": 20,
-              },
-              "style": {
-                "alignSelf": "flex-end",
-                "marginLeft": "3pt",
-                "size": "20",
-              },
-              "type": "SVG",
-            },
           ],
           "parent": [Circular],
           "props": {
             "class": "picasso-title-container",
           },
           "style": {
-            "alignItems": "baseline",
+            "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
-            "marginTop": "-6pt",
+            "gap": "8pt",
+            "marginBottom": "4pt",
+            "marginTop": "-4pt",
           },
           "type": "VIEW",
         },

print/common

@@ -0,0 +1 @@
+../common