Doc: Update States view docs

- Updated images
- Converted jpg images to png
- Updated instructions

Task-number: QDS-6186
Change-Id: Ibaee1acd11881c49d272e9c41e11b729e3c951ec
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -102,7 +102,8 @@
     components in \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
-        \li In the \l States view, select \uicontrol {Create New State}.
+        \li In the \l States view, select \inlineimage icons/plus.png
+        .
         \li Enter \e login as the state name.
             \image loginui3-login-state.jpg "States view"
         \li Select \e repeatPassword in \uicontrol Navigator to display its

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -267,10 +267,10 @@
     in \uicontrol Timeline:
 
     \list 1
-        \li In \uicontrol States, select \uicontrol {Create New State} twice to
+        \li In \uicontrol States, select \inlineimage icons/plus.png
-            add two states called \e login and \e createAccount. You don't
+            twice to add two states called \e login and \e createAccount. You
-            need to make any property changes this time because you'll bind the
+            don't need to make any property changes this time because you'll
-            states to property animations.
+            bind the states to property animations.
        \li In \uicontrol States, select \inlineimage icons/action-icon.png
             for \e login to open the \uicontrol Actions menu, and then
             select \uicontrol {Set as Default} to determine that the \e login

doc/qtdesignstudio/src/components/qtquick-buttons.qdoc

@@ -234,7 +234,7 @@
     \section1 Using States to Change Component Property Values
 
     \list 1
-        \li In the \l States view, select \uicontrol {Create New State}
+        \li In the \l States view, select \inlineimage icons/plus.png
             twice to create two new states.
             \image qmldesigner-borderimage-states.png "Active and inactive states"
         \li Select \uicontrol State1.

doc/qtdesignstudio/src/views/qtquick-states-view.qdoc

@@ -38,19 +38,10 @@
     To open the \uicontrol States view, select \uicontrol View >
     \uicontrol Views > \uicontrol States.
 
-    To collapse or expand the \uicontrol States view, select:
-
-    \list
-        \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol {Toggle States}.
-        \li Press \key {Ctr+Alt+S} on Windows or \key {Cmd+Option+S} on \macOS.
-        \li Right-click the view and select \uicontrol Collapse or
-            \uicontrol Expand.
-    \endlist
-
     Initially, \uicontrol States displays a \e {base state} that shows the
     selected \l{glossary-component}{component} in its initial state. To add
-    states, select \uicontrol {Create New State}.
+    states, select \inlineimage icons/plus.png
+    in the \uicontrol States view.
 
     For more information, watch the following video:
 

doc/qtdesignstudio/src/views/qtquick-states.qdoc

@@ -36,7 +36,8 @@
     \title Adding States
 
     You can define states for components and component instances in the
-    \l States view by selecting \uicontrol {Create New State}.
+    \l States view by selecting \inlineimage icons/plus.png
+    .
 
     \image qmldesigner-transitions.png "States view"
 
@@ -181,7 +182,7 @@
             \inlineimage icons/eye_open.png
             icon in \l Navigator to hide components on the canvas that are
             not part of a view.
-        \li In \uicontrol States, select \uicontrol {Create New State} to create
+        \li In \uicontrol States, select the \uicontrol + symbol to create
             a new state and give it a name. For example, \c Normal.
         \li In \l Properties (2), deselect the \uicontrol Visibility
             check box or set \uicontrol Opacity to 0 for each component that