+
+
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.scss b/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.scss
new file mode 100644
index 00000000..506a0740
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.scss
@@ -0,0 +1,60 @@
+.doc-label-wrapper {
+ margin-bottom: 15px;
+}
+
+.doc-label {
+ width: 70px;
+ // height: 15px;
+ color: white;
+ text-align: center;
+ padding: 3px 0 2px 0;
+ font-size: 11px;
+ border-radius: 3px;
+ float: left;
+
+ &__bot {
+ background-color: #017282;
+ }
+
+ &__replies {
+ background-color: #59028f;
+ }
+
+ &__thread {
+ background-color: #007233;
+ }
+
+ &__xpost {
+ background-color: #9f5d00;
+ }
+
+ &__old {
+ background-color: #960000;
+ }
+
+ &__remote {
+ background-color: #264d94;
+ }
+}
+
+.doc-label-definition {
+ margin-left: 85px;
+ position: relative;
+ // top: -1px;
+
+ & a {
+ color: white;
+ text-decoration: underline;
+
+ &:hover, &:active, &:focus {
+ color: rgb(218, 218, 218);
+ }
+ }
+
+ &__gray {
+ display: inline-block;
+ margin-top: 5px;
+ color: #0f111a;
+ color: #9497a5;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.spec.ts b/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.spec.ts
new file mode 100644
index 00000000..d72f59e7
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LabelsTutorialComponent } from './labels-tutorial.component';
+
+xdescribe('LabelsTutorialComponent', () => {
+ let component: LabelsTutorialComponent;
+ let fixture: ComponentFixtureLabels
+
+ Sengi uses labels on statuses to describe them properly:
+
+ 
+
Definitions
++
+
+
+ BOT
+
+
+ The account is tagged as a bot
+
+
+
+
+ REPLIES
+
+
+ The status has replies
+
+
+
+
+ THREAD
+
+
+ The status is part of a thread
+
+
+
+
+ X-POST
+
+
+ The status was cross-posted using a software like MOA.
+ This functionality is limited to Local TL/Accounts due to API limitation. +
+ + This functionality is limited to Local TL/Accounts due to API limitation. +
+
+
+ OLD
+
+
+ The status was posted more than 3 months ago.
+
+
+
+
+
+
+
+
+ REMOTE
+
+
+ The status wasn't federated with your instance and was fetched remotely.
+ This functionality bypasses the blocking rules of your account/instance, you can disable it in the settings. +
+ + This functionality bypasses the blocking rules of your account/instance, you can disable it in the settings. +
+ +
+
+
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.scss b/src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.spec.ts b/src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.spec.ts
new file mode 100644
index 00000000..4169c5fe
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsTutorialComponent } from './notifications-tutorial.component';
+
+xdescribe('NotificationsTutorialComponent', () => {
+ let component: NotificationsTutorialComponent;
+ let fixture: ComponentFixtureAnd... you're all set! 🎉
+
+ Please find below more information about Sengi.
+
+
Notifications
+
+ By default, Sengi doesn't need notification timelines: it has its own way to do it.
+
+ When your account will receive a new mention, follow, boost, favorite and other kind of notifications, your
+ avatar's icon will start flashing this way:
+
+ 
+
+
+ If you right-click on your avatar, the account panel will automatically open and switch to the related
+ subsection (mentions or notifications) and show you the last entries.
+ The flashing animation will then automatically stop:
+
+
+
+ The aim of this mechanism is to prevent the flood of notification timelines (one per account) in the interface,
+ especially if you add a lot of accounts in Sengi.
+
+ Of course, you can disable various parts of this mechanism in the settings like "disable avatar notification", "disable account's panel autofocus", etc.
+
+
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.scss b/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.scss
new file mode 100644
index 00000000..43200572
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.scss
@@ -0,0 +1,29 @@
+.follow {
+ color: white;
+ display: block;
+ border: 1px solid rgb(0, 84, 122);
+ border-radius: 5px;
+ width: 200px;
+ text-align: center;
+ padding: 10px 0;
+ margin: 0 auto 30px auto;
+ transition: all .2s;
+ box-shadow: inset 0 0 5px rgb(0, 84, 122);
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: rgb(0, 84, 122);
+ }
+
+ &__disabled {
+ opacity: .15;
+ border: 1px solid gray;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: gray;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.spec.ts b/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.spec.ts
new file mode 100644
index 00000000..6c481e4a
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThankyouTutorialComponent } from './thankyou-tutorial.component';
+
+xdescribe('ThankyouTutorialComponent', () => {
+ let component: ThankyouTutorialComponent;
+ let fixture: ComponentFixtureThank you!
+
+ Thank you for downloading Sengi, I hope you will enjoy using this app as much as I did when making it.
+
+ Please find below some useful informations and... that's it!
+
+
The app's account
+
+
+ 
+
+
+
+ Follow @Sengi_app
+
+
Alternative builds
+
+ Official Docker
+ build
+ Official Snap build
+
+
Other ressources
+
+ Official
+ page
+ Github
+ Repository
+ Maintainer's dev
+ blog
+
+
+
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss b/src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss
new file mode 100644
index 00000000..47fad1a3
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss
@@ -0,0 +1,142 @@
+@import"variables";
+@import "commons";
+@import "panel";
+
+$border-color: #1d2335;
+$footer-height: 30px;
+
+.tutorial {
+ border: 1px solid $border-color;
+ background-color: $color-primary;
+ height: calc(100%);
+ border-radius: 2px;
+
+ &__content {
+ height: calc(100% - #{$footer-height});
+ }
+
+ &__footer {
+ border-top: 1px solid $border-color;
+ height: $footer-height;
+
+ &--button {
+ text-transform: uppercase;
+ font-size: 15px;
+ text-align: center;
+ display: inline-block;
+ height: $footer-height;
+ width: calc(33.33333% - 1px);
+ color: white;
+ padding-top: 4px;
+ transition: all .2s;
+
+ &:not(:last-child) {
+ border-right: 1px solid $border-color;
+ }
+
+ &--close {
+ &:hover {
+ text-decoration: none;
+ background-color: rgb(95, 0, 0);
+ }
+ }
+
+ &--navigate {
+ &:hover {
+ text-decoration: none;
+ background-color: rgb(0, 117, 172);
+ }
+ }
+
+ &--next {
+ background-color: rgb(230, 230, 230);
+ background-color: rgb(0, 74, 109);
+ background-color: rgb(0, 84, 122);
+ color: white;
+
+ // font-weight: bold;
+ &:hover {
+ text-decoration: none;
+ background-color: rgb(0, 74, 109);
+ background-color: rgb(0, 117, 172);
+ }
+ }
+
+ &--disabled {
+ color: #4e5672;
+
+ &:hover {
+ cursor: default;
+ text-decoration: none;
+ background-color: rgba(0, 0, 0, 0);
+ }
+ }
+ }
+ }
+}
+
+.tutorial-content {
+ font-size: 14px;
+
+ padding: 5px 10px;
+ overflow-y: auto;
+ height: calc(100%);
+
+ &__title {
+ font-size: 20px;
+
+ }
+
+ &__title-important {
+ font-size: 20px;
+ margin: 5px 0 15px 10px;
+ }
+
+ &__subtitle {
+ font-size: 16px;
+
+ }
+}
+
+.content {
+ &__center {
+ margin: auto;
+ width: 48px;
+ display: block;
+ }
+
+ &__expand {
+ margin: auto;
+ width: calc(100%);
+ max-width: 380px;
+ display: block;
+
+ &--smaller {
+ max-width: 270px;
+ }
+ }
+}
+
+.link {
+ color: white;
+ text-decoration: underline;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: rgb(218, 218, 218);
+ }
+
+ &__tab {
+ padding-left: 10px;
+ }
+}
+
+.clean-outline{
+ display: block;
+ &:focus {
+ background: none !important;
+ border: 0px !important;
+ outline: none !important;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/tutorial-enhanced/tutorial-enhanced.component.spec.ts b/src/app/components/tutorial-enhanced/tutorial-enhanced.component.spec.ts
new file mode 100644
index 00000000..e129ba7d
--- /dev/null
+++ b/src/app/components/tutorial-enhanced/tutorial-enhanced.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TutorialEnhancedComponent } from './tutorial-enhanced.component';
+
+xdescribe('TutorialEnhancedComponent', () => {
+ let component: TutorialEnhancedComponent;
+ let fixture: ComponentFixture
+
+
+Privacy Policy
+Your privacy is important to us. It is Sengi's policy to respect your privacy regarding any information we may collect from you across our website, https://sengi.nicolas-constant.com, and other sites we own and operate.
+We don't ask nor retain any personal information.
+We don’t share any personally identifying information publicly or with third-parties, except when required to by law.
+Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.
+Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.
+This policy is effective as of 1 September 2020.
+ + + \ No newline at end of file diff --git a/src/assets/img/account.png b/src/assets/img/account.png new file mode 100644 index 00000000..5a59a301 Binary files /dev/null and b/src/assets/img/account.png differ diff --git a/src/assets/img/labels.png b/src/assets/img/labels.png new file mode 100644 index 00000000..e55d89ff Binary files /dev/null and b/src/assets/img/labels.png differ diff --git a/src/assets/video/flashing.gif b/src/assets/video/flashing.gif new file mode 100644 index 00000000..132b9a86 Binary files /dev/null and b/src/assets/video/flashing.gif differ diff --git a/src/assets/video/flashing.mp4 b/src/assets/video/flashing.mp4 new file mode 100644 index 00000000..6b20318c Binary files /dev/null and b/src/assets/video/flashing.mp4 differ diff --git a/src/assets/video/notification.mp4 b/src/assets/video/notification.mp4 new file mode 100644 index 00000000..61b503c3 Binary files /dev/null and b/src/assets/video/notification.mp4 differ